0

次のようなワードプレスメニューがあります。

<div id="top_menu">
  <ul class="menu">
    <li id="menu-item-1" class="menu-item menu-item-type-post_type menu-item-object-page menu-item-1"><a href="moo">moo</a>
      <ul class="sub-menu">
        <li id="menu-item-2" class="menu-item menu-item-type-post_type menu-item-object-page menu-item-2"><a href="foo">foo</a></li>
        <li id="menu-item-3" class="menu-item menu-item-type-post_type menu-item-object-page menu-item-3"><a href="bar">bar</a></li>
      </ul>
    </li>
    <li id="menu-item-4" class="menu-item menu-item-type-post_type menu-item-object-page menu-item-4"><a href="baz">baz</a></li>
  </ul>
</div>

次のようにスタイリングします。

#top_menu ul li ul{
    z-index: 9999;
    position: absolute;
    left: -999em;
    height: auto;
    top:80px;
    width:auto;
    clear:both;
    border:0;
    border-top:none;
}
#top_menu ul li li {
    margin:0px;
    padding:0px;
    background:none;
    width:auto;
}

#top_menu ul li ul a { 
    width:auto;
    line-height:26px;
    font-size:16px;
    display:block;
    text-align:left;
    text-shadow: none;
}
#top_menu ul li:hover ul ul, #top_menu ul li:hover ul ul ul, #top_menu ul li.sfhover ul ul, #top_menu ul li.sfhover ul ul ul {
    left: -999em;
}
#top_menu ul li:hover ul, #top_menu ul li li:hover ul, #top_menu ul li li li:hover ul, #top_menu ul li.sfhover ul, #top_menu ul li li.sfhover ul, #top_menu ul li li li.sfhover ul {
    left: auto;
}
#top_menu ul li:hover, #top_menu ul li.sfhover { 
    position: static;
}

ここで確認できます: http://jsfiddle.net/JBXLr/1/

ここで、「moo」サブメニューに移動すると、foo と bar が表示されます。私の目標は、マウスが「moo」リンク領域から移動した後、たとえば2秒間そのサブメニューを開いたままにすることです。これどうやってするの？

どんな助けにも感謝します！

4

2 に答える 2

1

javascript (jQuery) を使用してサブメニューを表示し、delay()を適用します

$('#top_menu li').hover(function(){
    $('.sub-menu', this).show();
}, function(){
    $('.sub-menu', this).delay(2000).hide();
});
于 2012-08-29T20:23:18.047 に答える
0

あなたがcssについて言及したので、これを投稿します。http://jsfiddle.net/JBXLr/3/は、css3 トランジションを使用して、必要なものを実現します。

jquery と現在の css を使用する別の JavaScript ソリューションを次に示します。

​​​​$("li").mouseout(function(){
    var uls =$(this).children("ul");
    uls.css("left","auto");
setTimeout(function(){ uls.css("left",""); }, 2000);
});​​​
于 2012-08-29T20:49:00.663 に答える