javascript - 有jQuery的下拉列表

我有一个here下拉菜单
将鼠标悬停在第二个链接上会显示两个字段。

我用这个小提琴来做CSS。
如何使用JS / jQuery实现相同的行为？

我试过了

$(".active").hover(function(){
    $("#navi li ul").css("display","block !important");
});

但它行不通。
 我也尝试使用cssText版本，但是失败了。
你能帮助我吗？

最佳答案

干得好...

http://jsfiddle.net/KETrw/1/

或者

http://jsfiddle.net/KETrw/3/

我发现对于此类悬停情况非常有用的插件是hoverIntent，它确定了将鼠标悬停在项目上时用户的意图。

另一种选择：

http://jsfiddle.net/KETrw/4/



JAVASCRIPT

$().ready(function(){
    $('#navi li').hover(function(){
        $(this).find('ul').toggle()
    })
})

的HTML

<div id="navi">
    <ul>
        <li style="display: inline-block; vertical-align: top; padding: 0px;">
            <a href="#">Link 1</a>
        </li>
        <li class="active" style="display: inline-block; vertical-align: top; padding: 0px;">
            <a href="#">Link 2</a>
            <ul style="display:none;">
                <li><a href="#">2a</a></li>
                <li><a href="#">2b</a></li>
            </ul>
        </li>
        <li style="display: inline-block; vertical-align: top; padding: 0px;"><a href="#">Link 3</a></li>
    </ul>
  </div>