CSS懸停下拉問題

Question

我想知道是否有可能顯示包含在nav元素中的鏈接與子菜單的id值，當我懸停在使用只是CSS more-subs的鏈接上的鏈接？如果是這樣如何？

<nav id="main"> 
    <ul>  
     <li><a href="#" id="more-subs">More</a></li>   
    </ul> 
</nav> 


<nav id="sub-menu"> 
    <ul>  
     <li><a href="#">sub</a></li> 
     <li><a href="#">sub</a></li> 
     <li><a href="#">sub</a></li> 
     <li><a href="#">sub</a></li> 
     <li><a href="#">sub</a></li>   
    </ul> 
</nav> 

Answer 1

您不能在CSS中向上移動DOM - 只能向下（因此級聯）。

如果你不能改變你的html標記，你將不得不使用JavaScript解決方案來完成這項工作。

否則，如果你可以改變你的HTML像這樣做：http://jsfiddle.net/JdZUx/15/（如果編輯的代碼你想有多個下拉菜單）

<nav id="main"> 
    <ul>  
     <li> 
      <a href="#" id="more-subs">More</a> 
      <ul class="sub-menu">  
       <li><a href="#">sub</a></li> 
       <li><a href="#">sub</a></li> 
       <li><a href="#">sub</a></li> 
       <li><a href="#">sub</a></li> 
       <li><a href="#">sub</a></li>   
      </ul> 
     </li>   
    </ul> 
</nav> 

#main .sub-menu {display:none;} 
#main li:hover .sub-menu {display:block;width:200px;background:#ccc;} 

注意：這僅僅是基本的代碼 - 如果你希望它是交叉瀏覽器兼容，你將不得不優化和添加更多的規則。 IE6中的:hover僅支持<a>元素

Answer 2

查看本教程，我認爲這會對你有所幫助。

https://www.servage.net/blog/2009/03/20/create-a-cool-css-based-drop-down-menu/

Answer 3

嘗試使用類似：

#more-subs #sub-menu{ 
    display: none; 
} 
#more-subs:hover #sub-menu{ 
    display: block; 
} 

這是幫助你？