2

非常に単純な垂直マルチレベル メニューを探していますが、何も見つかりませんでした。メニューの私の考えは、たとえば次のようなものです。

<ul id="menu">
<li><a href="#">Item 1</a></li>
<li class="parent"><a href="#">Item 2</a>
    <ul>
        <li> <a href="#">Sub 1</a></li>
        <li> <a href="#">Sub 2</a></li>
    </ul>
</li>
<li><a href="#">Item 3</a></li>
<li><a href="#">Item 4</a></li>
<li><a href="#">Item 5</a>
    <ul>
        <li> <a href="#">Sub 1</a></li>
        <li> <a href="#">Sub 2</a></li>
    </ul>
</li>
<li><a href="#">Item 6</a></li>

そして、最初にすべてのサブカテゴリを非表示にしたいと思います。そして、いくつかのカテゴリをクリックすると、ページが読み込まれ、class="parent" を持つカテゴリがそのカテゴリを表示します。私の質問は、どうすればcssだけでこれに到達できますか?

4

3 に答える 3

2

これがホバー メニューの基本的な仕組みです。<ul>デフォルトで非表示にし、ホバー時に表示します。

jsフィドル

#menu li > ul {
    display:none;
}

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

.parent同様に表示したい場合は、ホバールールでそれを入れてください：

jsフィドル

#menu li:hover > ul,
#menu li.parent > ul{
    display:block;
}
于 2013-03-29T13:31:38.980 に答える
0 
#menu ul li ul {display: none;}
#menu ul li.parent ul {display: block;}
于 2013-03-29T13:31:57.360 に答える
0

サブカテゴリを非表示にするには、これらをcssファイルに追加する必要があります

#menu li > ul { display:none;}
于 2013-03-29T13:36:40.240 に答える