html - CSS Hover Menu Problems

Question

I have a problem with my CSS hover menu.

It pops out perfectly fine and in the right location, however when I try to go to one of the options in the pop-out menu, it disappears and for the life of me I can't figure out how to stop it from doing so.

Is there any way to stop the menu from disappearing as soon as I try to select one of the sub menu options?

I've looked around on Stack Overflow (correct me if I'm wrong) and haven't found anything like this, but that may be because I have no idea how to search this problem properly.

I've tried using jQuery for this too, but I just had the same problem.

You can see a fiddle here which shows the problem perfectly.

Thanks.

Answer 1

I hope below link will help you

http://jsfiddle.net/j8Ny4/9/

Answer 2

Add this to your css:

li.sign {
    width: 80% !important;
}

.navigation ul li {
   width: 115%;
}

Answer 3

give width -> .navigation ul accordingly

.navigation ul {
padding: 20px 20px 20px 40px;
list-style: none;
    width:300px; // according to your
}

Answer 4

I answered my own question actually.

I assigned a class to the .navigation ul li:hover ul called .showup and another which set the display of the .navigaiton ul li ul to none.

I then ran this jQuery to make it work

$('li:has(ul)').hoverIntent(function() {
    $(this).find('ul').removeClass('hide');
    $(this).find('ul').addClass('showup');
}, function() {
    $(this).find('ul').removeClass('showup');
    $(this).find('ul').addClass('hide');
})

and now it works great!