下拉導航菜單

我掙扎定位下拉導航菜單的第二級，並一直在尋找一些幫助，請。下拉導航菜單

本身工作正常，中殿，它只是它顯示的母公司，在那裏，我希望它顯示到它的正下方。

例如，如果您將鼠標懸停在「首頁」上，則應在辦公室的下方顯示「辦公室」，當您將鼠標懸停在「辦公室」上時，您應該會看到右側的所有辦公室，但它目前正在顯示，遮蔽了所有其他選項。

/** 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>

來源

2012-01-20 David Gard

[Twitter的引導（HTTP：//嘰嘰喳喳.github.com/bootstrap /＃navigation）有一個很好的導航下拉式實現。 ...它在GitHub上開源。 – ryankeairns

看你的代碼，我建議你嘗試使用子選擇器代替後代選擇。

而不是

#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>

來源

2012-01-20 15:47:57

謝謝，示例現在在我的原始帖子中。它是由Word Press生成的，所以我無法更改HTML，但我確定可能沒有必要。 –

@DavidGard請修改我的答案，並用可能的解決方案進行編輯。 –

略有修改，但我從你的答案中獲得了要點。所有的工作。謝謝。 –

下拉導航菜單

回答

相關問題