0

私のウェブサイトにホバードロップダウンメニューがあります。ホバーするまでOKと表示されます。サブメニューが表示されますが、リンクをクリックする前にサブメニューが消えます。

ここにHTMLがあります - 

<div id="top-nav"><div id="nav">

<nav>
<ul id="menu" style="list-style-type: none;">

    <li id="sub"><a href="#">Artists</a>
        <ul>
            <li><a href="#">Banks</a></li>
            <li><a href="#">Lil Silva</a></li>
            <li><a href="#">Frances and the Lights</a></li>
            <li><a href="#">Jim-E Stack</a></li>
        </ul>
    </li>
    <li><a href="#">Night</a></li>
    <li><a href="#">Info</a></li>
</ul>
</nav>

</div>
</div>

そしてここにCSSがあります -

#nav {
text-align:center;
list-style: none;

}
ul#menu {
background-color: #FFFFFF;
list-style: none outside none;
margin: 0 auto;
padding-bottom: 0px;
padding-top: 0px;
text-align: center;
width: 300px;

}
ul#menu:after {
content: "";
background-color: #FFFFFF;
height: 10px;
width: 100%;
display: block;
position: absolute;
left: 0;
margin-top: 20px;

}
ul#menu li {
float: left;
}
ul#menu li a {
color: #666666;
font-size: 12px;
margin: 0;
padding: 0px 35px;
text-decoration: none;

}
ul#menu li a:hover {
background-color: #ccc;
}
a.selected-page, ul#menu a.selected-page:hover {
background-color: #FFFFFF;
}
li#sub ul {
display: none;
position: absolute;
background-color: #FFFFFF;
z-index: 22222;
margin-top: 4px;
overflow: hidden;
}
li#sub ul li {
display: block;
float: none;
border-top-style: none;
border-width: 2px;
border-color: #FFFFFF;
text-align: left;
padding-top: 5px;
padding-bottom: 5px;

}
ul#menu li#sub:hover ul {
display: block;
}
ul#menu li#sub ul li:hover {
background-color: #FFFFFF;
}

私は何を間違っていますか？どんな助けでも大歓迎です！

4

3 に答える 3

1

問題は、CSS コードの次の行です。

li#sub ul {
    ...
    margin-top: 4px;
    ...
}

この margin-top を削除するだけで、ドロップダウン メニューが正しく機能します。

あなたの例では、「アーティスト」リンクと下のドロップダウンメニューの間に 4px のマージンスペースがあります。カーソルがリンクから離れてこの「余白領域」に入ると、ブラウザはそれをリンクのホバリングが解除されたと解釈し、ドロップダウンを非表示にします。

于 2013-10-24T17:27:04.883 に答える
0

これに Padding: 0 を追加します

li#sub ul {
    padding: 0;
}

http://jsfiddle.net/tdQmE/

于 2013-10-24T19:30:43.250 に答える
0

ダラックが言ったように、CSS から上部マージンを削除します。

li#sub ul {
    margin-top:0;
}

また、サブメニューの UL および/または LI の子から左マージン/パディングを減らします。元の大きな値 (35 ピクセル) を使用すると、メニューが多くの目に見えないスペースの上に置かれる可能性があります。

ul#menu li ul li a {
    padding-left:5px;
}

フィドル: http://jsfiddle.net/LXwTr/

于 2013-10-24T21:44:07.490 に答える