JQuery Ul Li Hover Effect

I have this code here and I am trying to show the nested .submenu lists on ul#menu li hover events. If you can see the ul.submenu's are inside the li's but for some reason when you

Solution 1:

Common problem. The space between the parent menu item and .submenu is the culprit.

An easy fix for this is wrapping .submenu in a div that's wide enough to act as bridge between the menu item and submenu.

See here - http://jsfiddle.net/BuJav/15/

CSS changes-

.submenu-wrapper {
    position: absolute;
    min-width: 160px;
    min-height: 36px;
    top: -4px;
    left: 160px;
}
.submenu {
    position: relative;
    min-width: 160px;
    min-height: 36px;
    top: 0;
    left: 10px;
    background: url('../images/gradient_menuarea.png') repeat-x;
}

JS Changes -

$(function(){
    $('#menu > li, .submenu > li').hover(
        function(){
            var submenu = $(this).find('ul.submenu');
            if (submenu.hasClass('submenu')){
                submenu.removeClass('hide');
            }
        },
        function(){
            var submenu = $(this).find('ul.submenu');
            if (submenu.hasClass('submenu')){
                submenu.addClass('hide');
            }
    });
});

Just so the submenu ul is targeted correctly.

---

Please note you can eliminate the JS by using this css

.submenu {display:none;}
#menu-area ul li:hover .submenu {display:block}

You won't need .hide class on submenu ul either

http://jsfiddle.net/BuJav/16/

Solution 2:

I don't know if it is considered acceptable in your current project, but you can do a quick-fix:

menu-area ul li a{
   width: 100%;
   color: #F2F2F2;
   display: block;
   padding-right:10%;
}

You can change the value to whatever % you want that fixes your needs. Just do it enough to make sure the meets up with the sub-menu area. I didn't bother checking the exact value. Let me know if it works!

Solution 3:

try this: http://jsfiddle.net/UFevL/6/

HTML

<div id="menu">
    <ul>
        <li class="active">
            <a href="?l=EL&amp;m=932K59EciV">Menu #1</a>
        </li>
        <li>
            <a href="?l=EL&amp;m=M-z-3crmAP">Menu #2</a>
        </li>
        <li>
            <a href="?l=EL&amp;m=jpHiTwH1bT">Menu #3</a>
        </li>
        <li>
            <a href="?l=EL&amp;m=Jwr0SIWoWX">Menu #4</a>
        </li>
        <li>
            <a href="?l=EL&amp;m=QY8SgMl5JH">Menu #4</a>
        </li>
        <li>
            <a href="?l=EL&amp;m=8GaCmPByu3">Menu #5</a>
        </li>
        <li>
            <ul>
                <li>
                    <a href="?l=EL&amp;m=ueHp2vYKUa">Submenu #1</a>
                </li>
                <li>
                    <a href="?l=EL&amp;m=HQvyKxum8q">Submenu #2</a>
                </li>
                <li>
                    <a href="?l=EL&amp;m=81cDaTOCsL">Submenu #3</a>
                </li>
            </ul>
            <a href="?l=EL&amp;m=BQMppfQ0Dl">Menu #6</a>
        </li>
        <li>
            <a href="?l=EL&amp;m=D3wTd4F5Mn">Menu #7</a>
        </li>
    </ul>
</div>

CSS

#menu ul {
    width: 160px;
    padding: 4px;
    margin: 0;
    border: 2px solid #94AA13;
    background-color: #fff;
    border-radius: 4px;
}

#menu li {
    position: relative;
    padding: 0;
    margin: 0;
}

#menu li + li {
    margin-top: 4px;
}

#menu a {
    display: block;
    padding: 0 20px;
    font-size: 14px;
    line-height: 36px;
    color: #f2f2f2;
    background-color: #283720;
    border-radius: 4px;
}

#menu li > ul {
    display: none;
    position: absolute;
    top: 0;
    left: 100%;
    margin: -4px 0 0 10px;
}

#menu li:hover > ul {
    display: block;
}

#menu li:hover > ul:before {
    display: block;
    content: "";
    position: absolute;
    top: 0;
    left: -10px;
    width: 10px;
    height: 100%;
}

JS... NONE!

The trick is in the :before element: http://caniuse.com/#search=before

If you can't use it, try adding a dummy div.