Question

I drop down horizontal menu, which works ok until I mouse leaves it. To ilustrate the problem better here are some screenshots:

1. When I mouse over “Menu item 3”:
   
2. When i mouse out of the ul(Chrome):
   
3. When i mouse out of the ul(Firefox):
   

When I mouse out from the ul I need menu to stay as on screenshot 1.
Here is my HTML:

<div  style="position: relative">                
    <nav>
         <ul id="main-menu">
            <li>@Html.ActionLink("Menu item 1", "Index", "InternalHome")</li>
            <li>@Html.ActionLink("Menu item 2", "Index", "TeachingMaterials")
                <ul>
                    <li>@Html.ActionLink("Menu item 2.1", "Index", "TeachingMaterials")</li>
                </ul>
            </li>
            <li>@Html.ActionLink("Menu item 3", "Index", "TeachingMaterials")
                <ul>
                    <li>@Html.ActionLink("Menu item 3.1", "Index", "TeachingMaterials")</li>
                    <li>@Html.ActionLink("Menu item 3.2", "Index", "TeachingMaterials")</li>
                    <li>@Html.ActionLink("Menu item 3.3", "Index", "TeachingMaterials")</li>
                </ul>
            </li>
            <li>@Html.ActionLink("Menu item 4", "Index", "TeachingMaterials")
            <li>@Html.ActionLink("Menu item 5", "Index", "TeachingMaterials")
        </ul>

    </nav>
</div>

CSS:

#main-menu *
{
    margin: 0;
    padding: 0;
}

#main-menu
{
    position: absolute;
    top: 0;
    left: 0;
    margin-left: 100px;
}

#main-menu li
{
    list-style: none;
    float: left;
}
#main-menu li a
{
    margin-right: 5px;
    padding: 2px;
    display: block;
}

#main-menu li ul li a
{
    display: block;
    width: 100%;
}

#main-menu li ul
{
    display: none;
}

#main-menu li:hover ul
{
    position: absolute;
    display: inline;
    left: 0;
    width: 100%;
}

#main-menu li:hover li
{
    float: left;
}

and simple JS to show submenus:

$(document).ready(function () {
var menuLinks = $("#main-menu li");

menuLinks.hover(function () {
    $("#main-menu li ul").hide();
    var menuLinkChildren = $(">ul", $(this));
    if (menuLinkChildren.length > 0) {
        menuLinkChildren.show();
    }
    return false;
}, null);

});

Answer 1

The problem is you’re combining CSS hover and jquery hover. Unfortunatly for you CSS wins this battle in modern browsers. Only since CSS3 the :hover on different elements is supported so if you need this to work x-browsers don’t use li:hover.

Instead of hiding the subMenuItems in CSS you can use that selector to define what happens when they are shown. Hide the submenus in jquery onload.

The only thing to do then is display the submenu and hide the submenus from siblings.

example: http://jsfiddle.net/tive/YzwPa/

CSS

#main-menu *
{
    margin: 0;
    padding: 0;
}

#main-menu
{
    position: absolute;
    top: 0;
    left: 0;
    margin-left: 100px;
}

#main-menu li
{
    list-style: none;
    float: left;
}
#main-menu li a
{
    margin-right: 5px;
    padding: 2px;
    display: block;
}

#main-menu li ul li a
{
    display: block;
    width: 100%;
}

#main-menu li ul
{
    position: absolute;
    display: inline-block;
    left: 0;
    width: 100%;
}

#main-menu li ul li
{
    float: left;
}

JS

$(function() {
    var menuLinks = $("#main-menu li");
    menuLinks.find("ul").hide();
    menuLinks.hover(function() {
        $(this).siblings().find("ul").hide();
        $(this).find("ul").show();
    });
});