Question

I currently have the following script:

http://jsfiddle.net/oshirowanen/mnXdv/

Which works fine, i.e. if a click on one of the navigations, it drops down, if the click on another, the existing dropdown disappears and the other dropdown appears, if i click anywhere on the document, whichever navigation is opened, will disappear.

How can I add a mouseover, so the other navigation automatically drops down, if another navigation is already dropped down. However, if no navigation is dropped down, to cause a dropdown, it must be clicked for it to dropdown, and so on.

Answer 1

Possible solution:

http://jsfiddle.net/mnXdv/8/

Although I would favour using <ul>‘s with CSS styles to control the .active state, so the Javascript would become much simpler, something like:

function makeActive(el) {
    $('.menu .active').removeClass('active');
    $(el).parent().addClass('active');
}

$('.menu li a').click(function() {
    makeActive(this);
});

$('.menu li a').hover(function() {
    if ($('.menu .active').length == 0) {
        return;
    }
    makeActive(this);
});