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>