У меня работает раскрывающееся меню, но оно должно быть в центре родительского элемента.
Вы можете увидеть это в действии по адресу http://jsfiddle.net/mayurj/a3TS9/
. В соответствии с примером выше, два раскрывающихся меню в разделах «О нас» и «Услуги» не центрируются автоматическиих родительские пункты меню.Кстати, второе выпадающее меню (Службы -> Службы мультимедиа) работает просто отлично (открывается справа).
Во-вторых, мне также нужно, чтобы родитель оставался выделенным (синим) под двумя раскрывающимися списками.описанные выше падения.Я знаю, что есть нечто, называемое селектором CSS, но не уверен, как заставить его работать.
Можно ли решить обе мои проблемы с помощью чистого CSS?
------------- КОД НИЖЕ HTML --------------------
<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>
</div>
</nav><!-- #access -->
</div>
</body>
</html>
------------- КОД CSS НИЖЕ --------------------
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;
}