Css menu, do not hide current menu link on hover

Question

Here i made an example of my menu jsfiddle. So i have horizontal menu with drop down, but what i need is - on page load first li should be expanded(this is not hard) and when i hover on any other element it should display current expanded content(and if i mouseleave current element should be expanded).

This is the situation when i hover on Item2 and mouseleave Item2 it should stay like this:

Item1       Item2          Item3
            |||||
subItem2.1  subItem2.2 subItem2.3

UPDATE:

i managed to do it, but with exception, here is the link on JSFiddle

Its works as i wanted, but when i click on a link Item1 , or Item2 , init() function is called, and Item1 , active again, i need somehow to set active link - clicked one,

for example if i clicked on a Item3 link it redirects me to Item3 page and this link is active in menu. (all code on Jsfiddle)

Answer 1

If I understand your question correctly, the problem is that you need to call the init function to redraw all, but at the same time you set there item1 as current; and this is not ok if you have just pressed link2.

If think that your solution should be to almost remove all the init code. All this can be done in the css styles, simplifying a lot your code.

you set active to items. (You are already doing this in the anchors, do it in the li). Then, put all the appearance styles inn the css, and your script is reduced.

don't need to set active on subitems. you can set rules like li.active li; that is, the li that is descendant of the active li.

Once you do all this, you can avoid the init funcion altogether.

Added fiddle

I have changed that in the updated fiddle

I am marking the visible item menu 'current', I find 'active' confusing for a class name. It must be in the li and not in the, so that it can affect the second level lis

Now the script is just

$(document).ready(function() {
    $("#menu_item ul.menu li.expanded").mouseover(function(){
        var previous = $('.current');
        previous.removeClass('current');          
        $(this).addClass('current');
    });
});

I am just removing current from the previous current element, and adding it to the new one.

The initial selection is just in the markup

<div id="menu_item">
    <ul class="menu">
        <li class="expanded first current">
        <a href="#" title="">Item1</a>

And the new css rules are:

#menu_item > ul.menu > li.current  {
    background-color: orange;
}
#menu_item ul.menu li ul {
    display: none;
}
#menu_item ul.menu li.current ul {
    display: block;
}

Answer 2

you should doing changes in your style than its can work properly.

ul.menu li.expanded ul {
  position: relative;
  display: block;
  top: 20px;
  background-color: orange;
}