Question

我很难定位下拉导航菜单的第二级，并且正在寻找一些帮助。

中殿本身工作正常，只是它显示在父母的下方，我希望它显示在它的右边。

例如，如果您将鼠标悬停在“主页”上，则应在下方（工作）显示“办公室”，将鼠标悬停在“办公室”上时，您应该看到一个包含所有办公室的菜单，在右侧，但它目前显示在下面，模糊了所有其他选项。

/** For the dropdown pages in the menu */
#header-nav li ul.children{
    background: #000000;
    display: block;
    float: none;
    position: absolute;
}
#header-nav li ul.children li{
    float: none;
}
#header-nav li ul.children li a{
    background: #000000;
    display: block;
}
#header-nav li ul.children li a:hover{
    background: #0066b5;
}
/** For the second level dropdown pages in the menu */
#header-nav li ul.children li ul.children{
    background: #000000;
    display: block;
    float: none;
    position: absolute;
}
#header-nav li ul.children li ul.children li{
    float: none;
}
#header-nav li ul.children li ul.children li a{
    background: #000000;
    display: inline;
}
#header-nav li ul.children li ul.children li a:hover{
    background: red;
}

根据要求，以下是网站HTML的示例 -

<li class="page_item page-item-9"><a>Precedents</a>
<ul class='children'>
    <li class="page_item page-item-256"><a href="http://intranet.dynedrewett.com/precedents/agricultrul-precedents/">Agricultrul Precedents</a>
    <ul class='children'>
        <li class="page_item page-item-258"><a href="http://intranet.dynedrewett.com/precedents/agricultrul-precedents/chapter-1-agricultural-partnerships-and-companies/">Chapter 1 &#8211; Agricultural Partnerships and Companies</a></li>
    </ul>
</li>

Answer 1

查看代码我建议尝试使用子选择器而不是后代选择器。

而不是

#header-nav li ul.children li ul.children {

你应该考虑使用

#header-nav > li > ul.children > li > ul.children {

防止潜在的干扰。

要进一步解决这个问题，如果你给我们一些HTML代码可以使用它会很好。

我想我已经找到了你。关键是将“ul.children”，“a”和“li”设置为“display：inline”。请参阅以下适用于我的代码，同时注意“white-space：nowrap”属性：

#header-nav > ul > li > ul.children{
    position: absolute;
}
#header-nav > ul > li > ul.children > li {
    float: none;
}
#header-nav > ul > li > ul.children li > a{
    display: inline;
}

#header-nav > ul > li > ul.children > li > ul.children{
    display: inline;
    position: absolute;
}
#header-nav > ul > li > ul.children > li > ul.children > li {
    white-space:nowrap; /*Prevents words/links from being cut off*/
}
#header-nav > ul > li > ul.children > li > ul.children > li > a {
    display: inline;
}

使用以下HTML进行测试：

<div id="header-nav">
    <ul>
        <li>
            <a>Home</a>
            <ul class="children">
                <li>
                    <a href="#">Offices</a>
                    <ul class="children">
                        <li><a href="#">Office #1</a></li>
                        <li><a href="#">Office #2</a></li>
                        <li><a href="#">Office #3</a></li>
                    </ul>
                </li>
            </ul>
        </li>
    </ul>
</div>

下拉导航菜单

1 个答案: