ドロップダウンナビゲーションメニュー

Question

私はドロップダウンナビゲーションメニューの第2レベルを配置するのに苦労していて、何か助けてくださいでした。

nave自体はうまく動作します。親の下に表示され、右に表示したい場所です。

たとえば、「ホーム」の上にマウスを移動すると、下に「オフィス」が表示され、「オフィス」の上にマウスを移動すると右にあるすべてのオフィスが表示されますそれは現在、下に表示され、他のすべてのオプションを隠しています。

/** 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" プロパティ：

次のHTMLでテスト

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

：

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