dropdownlist with jquery

Question

I've got a dropdownmenu over here By hovering over the second link two fields are shown.

I do it with CSS in this fiddle. How can I achieve the same behaviour with JS/ jQuery?

I tried

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

but it won't work. I also tried the version with cssText, but failed. Can you help me?

Answer 1

Here you go...

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

Alternatively

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

A plugin i found very usefull for these kinds of hover situations is hoverIntent, it determines the users intent when hovering over items.

Yet another alternative:

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>

Answer 2

!important does not seem to work, if you use block it will show the menu, but it won't hide it. Try toggle to hide it:

$(".active a").hover(function(){
    $("#navi li ul").toggle(250);
});