css - 下拉导航菜单

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>