-1

<ul>従来の方法で垂直サブメニューを含む水平メニューがあり<ul>ます。

<ul>親<li>にカーソルを合わせたときにサブメニュー (2 番目) が表示されるように、単純な JQuery コードを作成しました。

$('#menulist li').hover(
function() {
  $(this).find('ul').stop().fadeIn(200);
},
function () {
    $(this).find('ul').stop().fadeOut(200);
  }
);

これは正常に機能しますが、1 つの点があります。すべてのサブメニューがメイン メニューの左端でフェードインするため、それぞれの親とインライン化されません<li>。

これは、 を使用したサブメニューの CSS と関係があると思いますposition: absolute;。

各サブメニューがプライマリメニューの親の下に表示されるように、おそらく私のjQueryを修正する方法を知っている人はいますか?

ありがとう！

編集：cssを追加

#menulist ul li {
  display: inline;
  list-style-type: none;
  padding-right: 10px; 
}


#menulist ul li ul{
        display:none;
        background-color:#FFF;
        padding: 10px;
        position: absolute;
        z-index: 100;
    }
4

1 に答える 1

0

試す

$('#menulist li').hover(function() {
     $(this).children('ul').stop().fadeIn(200);
},
function () {
    $(this).children('ul').stop().fadeOut(200);
  });

デモフィドル

于 2013-01-09T05:07:50.223 に答える