你能把这个下拉菜单居中并突出显示父级吗？

发布于 2024-11-19 17:19:53 字数 6527 浏览 3 评论 0原文

我有一个下拉菜单可以工作，但需要它在父项下居中。

您可以在 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 &#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 代码如下 --------------------

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;
}

原文

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>
             </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;
}

分享到QQ

分享到微博

如果你对这篇内容有疑问，欢迎到本站社区发帖提问参与讨论，获取更多帮助，或者扫码二维码加入 Web 技术交流群。

发布评论

需要登录才能够评论，你可以免费注册一个本站的账号。

空城旧梦 2024-11-26 17:19:54

以下是无需使用 JavaScript 即可使父菜单保持突出显示的修复方法。

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

要使父菜单突出显示，您需要具有:hover 伪类位于

元素上，而不是上，如下所示：

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

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

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.

回复收藏 0 原文

~没有更多了~

关于作者

微凉徒眸意

暂无简介

0 文章

0 评论

24 人气

关注发私信

友情链接

文江博客

你能把这个下拉菜单居中并突出显示父级吗？

如果你对这篇内容有疑问，欢迎到本站社区发帖提问参与讨论，获取更多帮助，或者扫码二维码加入 Web 技术交流群。

发布评论

评论（1）

关于作者

相关话题

热门标签

推荐作者

浪漫人生路

620vip

羞稚

走过海棠暮

你好刘可爱

陌若浮生

友情链接

你能把这个下拉菜单居中并突出显示父级吗？

如果你对这篇内容有疑问，欢迎到本站社区发帖提问 参与讨论，获取更多帮助，或者扫码二维码加入 Web 技术交流群。

发布评论

评论（1）

关于作者

相关话题

热门标签

推荐作者

浪漫人生路

620vip

羞稚

走过海棠暮

你好刘可爱

陌若浮生

友情链接

如果你对这篇内容有疑问，欢迎到本站社区发帖提问参与讨论，获取更多帮助，或者扫码二维码加入 Web 技术交流群。