Can you centre this Dropdown and highlight the parent?
I have a dropdown menu working but need it centered under the parent.
You can see this in action over at http://jsfiddle.net/mayurj/a3TS9/
Specific to the example above, the two dropdown menus under "About us" and "Services" are not auto centering under their parent menu items. By the way, the second drop down menu (Services --> Media Services) works just fine (opens to the right).
Secondly, I also need the parent to remain highlighted (blue) under the two drop downs described above. I know there is something called a CSS selector, but not sure how to make it work.
Can both my issues be done with pure CSS?
------------- HTML CODE BELOW --------------------
<body>
<div id="navcontainer">
<nav id="access" role="navigation">
<div class="menu-primary-container"><ul id="menu-primary" class="menu"><li id="menu-item-64" class="current-menu-item page_item page-item-4 current_page_item menu-item-64"><a href="http:///">Home</a></li>
<li id="menu-item-72" class="menu-item-72"><a href="http:///about-us/">About us</a>
<ul class="sub-menu">
<li id="menu-item-71" class="menu-item-71"><a href="http:///about-us/why-123-capital/">Why 123 Street Capital?</a></li>
<li id="menu-item-67" class="menu-item-67"><a href="http:///about-us/what-is-investor-relations/">What is Investor Relations?</a></li>
<li id="menu-item-74" class="menu-item-74"><a href="http:///about-us/our-values/">Our Values</a></li>
<li id="menu-item-77" class="menu-item-77"><a href="http:///about-us/our-team/">Our Team</a></li>
<li id="menu-item-81" class="menu-item-81"><a href="http:///about-us/our-partners/">Our Partners</a></li>
</ul>
</li>
<li id="menu-item-133" class="menu-item-133"><a href="http:///services/">Services</a>
<ul class="sub-menu">
<li id="menu-item-134" class="menu-item menu-item-type-custom menu-item-object-custom menu-item-134"><a href="/services">Overview</a></li>
<li id="menu-item-68" class="menu-item-68"><a href="http:///services/customer-relationship-management-database-management/">Customer Relationship Management / Database Management</a></li>
<li id="menu-item-73" class="menu-item-73"><a href="http:///services/investor-relations/">Investor Relations</a></li>
<li id="menu-item-76" class="menu-item-76"><a href="http:///services/media-services/">Media Services</a>
<ul class="sub-menu">
<li id="menu-item-66" class="menu-item-66"><a href="http:///services/media-services/publications/">Publications</a></li>
<li id="menu-item-70" class="menu-item-70"><a href="http:///services/media-services/press-releases/">Press Releases</a></li>
<li id="menu-item-75" class="menu-item-75"><a href="http:///services/media-services/t-v-interviews/">T.V. Interviews</a></li>
</ul>
</li>
<li id="menu-item-80" class="menu-item-80"><a href="http:///services/marketing-branding/">Marketing / Branding</a></li>
</ul>
</li>
<li id="menu-item-79" class="menu-item-79"><a href="http:///clients/">Clients</a></li>
<li id="menu-item-82" class="menu-item-82"><a href="http:///updates-and-events/">Updates & Events</a></li>
<li id="menu-item-83" class="menu-item-83"><a href="http:///contact-us/">Contact Us</a></li>
</ul>
</di开发者_开发技巧v>
</nav><!-- #access -->
</div>
</body>
</html>
------------- CSS CODE BELOW --------------------
a, a:link, a:active, a:hover {
color:#0085c5;
text-decoration:none;
}
#access {
display: block;
float: right;
margin-right:30px;
margin-top:7px;
}
#access ul {
list-style: none;
margin: 0;
padding-left: 0;
}
#access li {
float: left;
position: relative;
}
#access a {
display: block;
line-height: 2em;
padding: 0 1em;
text-decoration: none;
}
#access ul ul {
box-shadow: 0 3px 3px rgba(0,0,0,0.2);
-moz-box-shadow: 0 3px 3px rgba(0,0,0,0.2);
-webkit-box-shadow: 0 3px 3px rgba(0,0,0,0.2);
display: none;
float: left;
position: absolute;
top: 2em;
left: 0;
z-index: 99999;
}
#access ul ul ul {
left: 100%;
top: 0;
}
#access ul ul a {
background: white;
line-height: 1em;
padding: .5em .5em .5em 1em;
width: 10em;
height: auto;
}
#access li:hover > a,
#access ul ul :hover > a {
background: white;
}
#access ul ul a:hover {
background: white;
}
#access ul li:hover > ul {
display: block;
}
body
{
background-image:url('/images/bg.png');
background-repeat:repeat-x;
font-family: 'Open Sans', 'Arial', 'Verdana', 'Tahoma', sans-serif;
font-size:13px;
color:#3e3e3e;
}
#access li {
text-align:center;
}
#access li a {
color:#5a5a5a;
font-size:13px;
font-weight:bold;
}
#access ul ul{
top:26px;
}
#access ul li a {
border-right:1px solid #0085c4;
}
#access ul li:last-child a {
border-right:none;
}
#access ul ul li a, #access ul ul ul li a {
border-right:none;
}
#access ul li a:hover {
background:#0085c4;
color:white;
}
#access ul ul li a {
border-bottom:1px solid white;
}
#access ul ul li {
margin-right:10px;
margin-left:10px;
border-bottom:1px solid #58595b;
}
#access ul ul li a {
width:145px;
}
#access ul ul ul li a {
width:100px;
}
#access ul ul li:last-child {
border-bottom:none;
}
#access ul ul li a:hover {
background:white;
color:#0085c4;
}
#access ul ul li:last-item a:hover {
border-bottom:1px solid white;
}
#access ul.sub-menu {
background:white;
}
#navcontainer {
width:960px;
height:39px;
background-image:url('/images/menushadow.png');
background-repeat:repeat-x;
}
Here is the fix to make your parent menus remain highlighted without using javascript.
http://jsfiddle.net/a3TS9/4/
To make parent menus highlight you need to have the :hover pseudo-class on the <li> element, not the <a> like so:
#access ul li:hover a {
background:#0085c4;
color:white;
}
Other changes were made but I only touched your css. You could clean your css up a little bit by adding some classes to your elements.
加载中,请稍侯......
精彩评论