Question

我有一个下拉菜单，但需要将其置于父级下方。

您可以在http://jsfiddle.net/mayurj/a3TS9/

处看到这一点

具体到上面的示例，“关于我们”和“服务”下的两个下拉菜单不会在其父菜单项下自动居中。顺便说一句，第二个下拉菜单（服务 - ＆gt;媒体服务）工作正常（向右打开）。

其次，我还需要父母在上述两个下拉列表中保持突出显示（蓝色）。我知道有一种称为CSS选择器的东西，但不知道如何让它工作。

我的问题可以用纯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 &#038; 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 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;
}

Answer 1

这是一个修复程序，可让您的父菜单保持突出显示而不使用javascript。

http://jsfiddle.net/a3TS9/4/

要使父菜单突出显示，您需要在:hover元素上设置<li>伪类，而不是像<a>那样：

#access ul li:hover a {
    background:#0085c4;
    color:white;
}

进行了其他更改，但我只触及了你的CSS。你可以通过在元素中添加一些类来清理你的css。

你可以将这个Dropdown集中在一起并突出显示父母吗？

1 个答案: