2 レベルの CSS ドロップダウン メニューを設計しました。1つだけを除いて、すべてが完璧に機能します。一番上のメニュー項目にカーソルを合わせると、第 1 レベルのドロップダウン メニューが表示され、第 1 レベルのメニューで「 Press」という項目にカーソルを合わせると、第 2 レベルのメニュー項目が表示されるようにします。しかし問題は、トップ メニューにカーソルを合わせると、すべてのサブメニューが一緒に表示されることです。つまり、display: none
は機能しません。なぜそれが起こり、解決策は何ですか?
HTML コード
<ul id="nav">
<li><a href="/ueber_uns.htm">About Us</a>
<ul>
<li><a href="#">Who We Are</a></li>
<li><a href="#">Our Goals</a></li>
<li><a href="#">Our Team</a></li>
<li><a href="#">Press</a>
<ul>
<li><a href="#">2006</a></li>
<li><a href="#">2007</a></li>
<li><a href="#">2008</a></li>
</ul>
</li>
<li><a href="#">Impressum</a></li>
</ul>
</li>
</ul>
CSSコード
ul#nav
{
margin: 0;
padding: 0;
list-style: none;
text-align: center;
/*display: table-cell;
vertical-align: middle;*/
}
ul#nav li
{
float: left;
position: relative;
font-size: 16px;
background-color: orange;
}
ul#nav li li
{
font-size: 14px;
}
ul#nav ul
{
margin: 0;
padding: 0;
list-style: none;
text-align: left;
display: none;
}
ul#nav li:hover ul
{
display: block;
position: absolute;
}
ul#nav a:link, ul#nav a:visited
{
display: block;
width: 110px;
padding: 10px 5px;
text-decoration: none;
color: #000;
}
ul#nav ul a:link, ul#nav ul a:visited
{
width: 135px;
}
ul#nav a:hover, ul#nav a:active
{
color: #fff;
}
ul#nav ul ul
{
position: absolute;
top: 0;
left: 100%;
display: none;
}
ul#nav ul li:hover ul
{
display: block;
}