1

次のようなドロップダウンを使用してCSSメニューを作成しようとしています:

メニュー1 メニュー2 メニュー3 アイテム1 アイテム1 アイテム1 アイテム2 アイテム2 アイテム2 アイテム3 アイテム3 アイテム4

メニュー バーは、メニュー ドロップダウン用の追加の li および sub UL を持つ UL です。CSS を作成し、メニュー ホバーでドロップダウンが発生しますが、ドロップダウン リストを調べようとするとすぐにメニューが消えます。明らかに、メニュー ホバーに css ホバー プロパティを設定したためです。CSSのみを使用しようとしています。ドロップダウン項目を確認している間、メニュー ドロップダウンを表示したままにするにはどうすればよいか教えていただけますか?

これが私のcssです：

#menuNav{width:100%; position:relative; height:28px; list-style:none;}
#menuNav li{float:left; position:relative;}  //MENU1, MENU2, MENU3
#menuNav li ul{position:absolute; visibility:hidden; width:100px;} //Each Dropdown is a UL
#menuNav a{display:block;}
#menuNav li:hover ul, #menuNav a:hover ul{visibility:visible;} //Show dropdown on MENU hover
4

2 に答える 2

2

CSSPlayにはさまざまなメニュー例があります。
テンプレートとして使用できるものが見つかるかもしれません。

于 2012-04-25T19:24:59.590 に答える
1

CSS

<style>
#navMenu{
margin:0;
padding:0;
}
#navMenu ul{
margin:0;
padding:0;
line-height:30px;
}
#navMenu li{
margin:0;
padding:0;
list-style:none;
float:left;
position:relative;
background:#3A4956;
}
#navMenu ul li a{
text-align:center;
color:black;
text-decoration:none;
font-family:"Comic Sans MS";
height:30px;
width:150px;
display:block;
border-bottom:1px black solid;
}
#navMenu ul li a:hover{
color:white;
}
#navMenu ul ul{
position:absolute;
visibility:hidden;
} 
#navMenu ul li:hover ul{
visibility:visible
}
#wrapper1{
border-radius:8px 0 0 0;
border-right:1px black solid

}
#wrapper4{
border-radius:0 8px 0 0;
}
</style>

HTML

<div id="wrapper">
<div id="navMenu">
<ul style="height: 30px; width: 308px">
<li id="wrapper1" style="left: 0px; top: 0px; width: 150px; height: 31px"><a style="color:black" href="#">Products</a>
<ul>
<li id="wrapper3"><a href="#">Link 1</a></li>
<li><a href="#">Link 2</a></li>
<li><a href="#">Link 3</a></li>
<li><a href="#">Link 4</a></li>
<li><a href="#">Link 5</a></li>
<li><a href="#">Link 6</a></li>
</ul>
</li>
<li id="wrapper4"><a style="color:black" href="#">Products</a>
<ul>
<li id="wrapper3"><a href="#">Link 1</a></li>
<li><a href="#">Link 2</a></li>
<li><a href="#">Link 3</a></li>
<li><a href="#">Link 4</a></li>
<li><a href="#">Link 5</a></li>
<li><a href="#">Link 6</a></li>
</ul>
</li>
</ul>
</div>
</div>
于 2012-04-25T19:51:32.777 に答える