0

メインメニューアンカーにカーソルを合わせるまでサブメニューアンカーを非表示にする単純なドロップダウンメニューを作成しようとしています。

htmlマークアップ

 <ul>
    <li><a href=".">1</a></li>
    <li><a href=".">2</a></li>
    <li>
       <a href=".">3</a>
       <a href=".">3.1</a>
       <a href=".">3.2</a>
    </li>
 </ul>

cssスタイル

 <style>
    ul li a:nth-child(n+2){
       display:none;
    }

    ul li a:nth-child(n+2):hover{
       display:block;
    }

    ul li a:hover + a:nth-child(n+2) {
       display: block;
    }
</style>

現在、これはサブメニュー3.2 .... 3.nの他のすべてのアンカーを表示できるようにする必要がある場合にのみ、サブメニュー（3.1）の最初のアンカーを表示します。これを実現するにはどうすればよいですか？

4

1 に答える 1

1

これを使用する必要があります：

HTML:

<ul id="container">
    <li><a href=".">1</a></li>
    <li><a href=".">2</a></li>
    <li><a href=".">3</a>
        <ul>
            <li><a href=".">3.1</a></li>
            <li><a href=".">3.2</a></li>
        </ul>
    </li>
</ul>

CSS:

#container>li>ul{
   display:none;
}

#container>li:hover>ul{
   display:block;
}

デモ: http://jsfiddle.net/Tx4z7/

サブメニューにパディングを追加することもできます。

#container>li>ul{
    padding-left:20px;
}

デモ: http://jsfiddle.net/Tx4z7/1/

于 2012-09-10T23:04:32.610 に答える