CSSホバードロップダウンの質問

Question

ちょうどCSSを使ってmore-subsのIDを持つリンクをホバーすると、nav要素に含まれるリンクをサブメニューのid値で表示することができますか？もしそうなら、どのように？

<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

DOMをCSSだけダウンすることはできません（カスケード接続）。

htmlマークアップを変更できない場合は、この作業を行うためにjavascriptソリューションを使用する必要があります。あなたはそれになりたい場合は - これは単なる基本的なコードです：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;} 

注：

そうしないと、あなたのHTMLを変更することができる場合は、このようにそれを行いますあなたは最適化してさらにいくつかのルールを追加する必要があります。また、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; 
} 

が、これはあなたを助けますか？