ここに問題があります。スーパーフィッシュCSSアプローチを使用して、ドロップダウンメニュー付きのメニューを作成しました。メインメニューは順序付けられていないリストで、それぞれ<li>
に子<a>
とが含まれています<ul>
。
<ul class="sfmenu">
<li>
<a href="#">MENU 1</a>
<ul>
<li><a href="#"><div>Stuff here</div></a></li>
<li><a href="#"><div>Stuff here</div></a></li>
<li><a href="#"><div>Stuff here</div></a></li>
</ul>
</li>
<li>
<a href="#">MENU 2</a>
<ul>
<li><a href="#"><div>Stuff here</div></a></li>
<li><a href="#"><div>Stuff here</div></a></li>
</ul>
</li>
</ul>
<li>
トップレベルのCSS<a>
は次のとおりです。
.sf-menu li {
color: #f9dfa0;
cursor: pointer;
display: inline-block;
float: left;
height: 45px;
margin: 0
padding: 0;
padding: 20px 10px 0 10px;
}
.sf-menu a
{
font-weight: normal;
text-decoration: none;
text-align: center;
height: 45px;
width: 100%;
}
この位置付け(パディング)により、ドロップダウン<li>
にカーソルを合わせるとダブルホバー効果<li>
が表示され、ドロップダウンにカーソルを合わせると<a>
再びドロップダウンします。動作するサブメニューをスライドダウンするためのjqueryコードがいくつかありますが、ホバーするとダブルドロップダウンが表示されます。私のjqueryコードは次のとおりです。
$(function() {
$('.sf-menu li').mouseover(function(){
$(this).children('ul').hide().slideDown('normal');
});
});
<a>
タグからホバーイベントを削除する方法はありますか?
どんなアイデアでも大歓迎です。