CSS嵌套列表菜單懸停問題

好的，我的問題是我的嵌套子類別應該隱藏，直到我將鼠標懸停在父類別上，但是當我將鼠標懸停在主父類別上時，所有子類別和子子類別都會顯示。CSS嵌套列表菜單懸停問題

我該如何解決這個問題，以便只有父母的子類別被顯示，而不是子類別的子子類別，直到我把鼠標懸停在它們上面？

這是CSS。

#nav-container ul.cat-container ol ol ol ol li a { 
    visibility: hidden; 
    height: 0; 
    display: none; 
} 

#nav-container ul.cat-container ol ol ol li a { 
    visibility: hidden; 
    height: 0; 
    display: none; 
} 

#nav-container ul.cat-container ol ol li a { 
    visibility: hidden; 
    height: 0; 
    display: none; 
} 

#nav-container ul.cat-container ol li { 
    visibility: hidden; 
    height: 0; 
    display: none; 
} 

#nav-container ul.cat-container ol ol ol li:hover ol li a { 
    visibility: visible; 
    height: auto; 
    display: block; 
} 

#nav-container ul.cat-container ol ol li:hover ol li a { 
    visibility: visible; 
    height: auto; 
    display: block; 
} 

#nav-container ul.cat-container ol li:hover ol li a { 
    visibility: visible; 
    height: auto; 
    display: block; 
} 

#nav-container ul.cat-container li.cat-header:hover ol li { 
    visibility: visible; 
    height: auto; 
    display: block; 
}

這裏是HTML。

<div id="nav-container"> 
    <ol> 
     <li> 
     <ul class="cat-container"> 
      <li class="cat-header"> 
      <h2><a href="#"class="header">First Nested List</a></h2> 
      <ol> 
       <li><a href="#">Second Nested List</a></li> 
       <li><a href="#">Second Nested List</a></li> 
      </ol> 
      </li> 
      <li class="cat-header"> 
      <h2><a href="#" class="header">First Nested List</a></h2> 
      <ol> 
       <li><a href="#">Second Nested List</a></li> 
       <li><a href="#">Second Nested List</a></li> 
      </ol> 
      </li> 
      <li class="cat-header"> 
      <h2><a href="#" class="header">First Nested List</a></h2> 
      <ol> 
       <li><a href="#">Second Nested List</a></li> 
       <li><a href="#">Second Nested List</a> 
       <ol> 
        <li><a href="#">Third Nested List</a></li> 
        <li><a href="#">Third Nested List</a> 
        <ol> 
         <li><a href="#">Fourth Nested List</a></li> 
         <li><a href="#">Fourth Nested List</a></li> 
        </ol> 
        </li> 
        <li><a href="#">Third Nested List</a> 
        <ol> 
         <li><a href="#">Fourth Nested List</a> 
         <ol> 
          <li><a href="#">Fifth Nested List</a></li> 
          <li><a href="#">Fifth Nested List</a></li> 
         </ol> 
         </li> 
         <li><a href="#">Fourth Nested List</a></li> 
        </ol> 
        </li> 
        <li><a href="#">Third Nested List</a></li> 
       </ol> 
       </li> 
       <li><a href="#">Second Nested List</a></li> 
      </ol> 
      </li> 
     </ul> 
     </li> 
    </ol> 
    </div>

來源

2011-07-12 theFIVE

爲什麼是負面評級？ – theFIVE

我把這個放入jsfiddle：http://jsfiddle.net/MVa62/並在chrome中測試。也許如果你簡化你的CSS和標記可能更容易解決問題？這看起來陰險複雜。 –

我將CSS稍微裁剪一點。 – theFIVE

@kei你有一個解決我的問題？

嗯..假設該解決方案並不涉及IE6-支持，只是涉及只顯示懸停直接孩子的問題，那麼，我可能有一個解決方案：

插入>爲在你的CSS顯示

#nav-container ul.cat-container ol ol ol li:hover > ol > li > a 

#nav-container ul.cat-container ol ol li:hover > ol > li > a 

#nav-container ul.cat-container ol li:hover > ol > li > a

小提琴：http://jsfiddle.net/3sYCG/

來源

2011-07-12 06:24:45 kei

我喜歡你的解決方案，但你是否也有IE6解決方案？ – theFIVE

怎樣才能點擊右側菜單的最後一項？當由於摺疊的子菜單而嘗試點擊它時會關閉。 – Tom

@Tom您需要將子菜單設置爲顯示在側面而不是在下面。如果你希望它們出現在下面，那麼你可能需要一個JavaScript解決方案來完成這個，而不是純粹的CSS解決方案。 – kei

這裏是你想在CSS什麼：

ul.cat-container li { 
    display: none; 
} 
ul.cat-container > li { 
    display: list-item; 
} 
ul.cat-container li:hover > ol > li { 
    display: list-item; 
}

我相信你並不需要人用長選擇和這樣的混亂。上面的代碼片段應該很好地覆蓋你的用例。

子選擇器（>）在除IE6及更低版本以外的任何地方都可以工作。我希望你現在不支持這些瀏覽器。

來源

2011-07-12 06:41:11 spliter

這個解決方案很好，很小，謝謝 – theFIVE

我希望能給出這個解決方案的支票:( – theFIVE

@theFIVE好，你覺得它有幫助。可惜你不能投票或接受這個解決方案;） – spliter

CSS嵌套列表菜單懸停問題

回答

相關問題