下拉导航菜单

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”。请参阅下面的代码为我工作，也注意到了 “白色空间：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>