Nav bar mouseenter/mouseleave not working between li elements

Question

I'mm trying to design a specific type of navbar in javascript/jquery.

I cannot get mouseenter() and mouseleave() to work correctly when the mouse passes between the li objects.

Here is my code. Any ideas?

http://jsfiddle.net/richofwombwell/1v8L0pdz/38/

function inversebuttonon(liId, aId) {
    $(liId).css('background-color', 'white');
    $(aId).css('background-color', 'white');
    $(aId).css('color', '#0086CA');
}

function inversebuttonoff(liId, aId) {
    $(liId).css('background-color', '#0086CA');
    $(aId).css('background-color', '#0086CA');
    $(aId).css('color', 'white');
}

function showselectedmenu(liclass, aclass) {
    $('.menu').css('max-height', '100px');
    $(liclass).css('display', 'inline');
    $(aclass).css('display', 'inline');
}

function dontshowselectedmenu(liclass, aclass) {
    $('.menu').css('max-height', '0px', 'none');
    $(liclass).css('display', 'none');
    $(aclass).css('display', 'none');
}

$('#n-2').mouseenter(function () {
    inversebuttonon('#n-2', '#a2');
    showselectedmenu('.tmenuli', '.tmenua1');
});

$('.menu').mouseleave(function () {
    dontshowselectedmenu('.tmenuli', '.tmenua1');
    inversebuttonoff('#n-2', '#a2');
});

$('#n-3').mouseenter(function () {
    inversebuttonon('#n-3', '#a3');
    showselectedmenu('.tmenuli2', '.tmenua2');
}); 

$('.menu').mouseleave(function () {
    dontshowselectedmenu('.tmenuli2', '.tmenua2');
    inversebuttonoff('#n-3', '#a3');
});

Answer 1

Your script does not work correctly because your html code is invalid (you are nesting DIVs instead of list elements. That forces the browser to correct your code (the way it wants to).

Before you continue scripting, please consider using CSS solution:

  * { box-sizing: border-box; font-family: sans-serif; font-size: 16px; } .my_menu { height: 66px; text-align: center; width: 100%; overflow: } .my_menu ul { list-style: none; } .my_menu ul li { display: inline-block; } .my_menu > ul { position: relative; background: none #0086CA; } .my_menu ul a { text-decoration: none; color: #fff; display: inline-block; } .my_menu > ul > li > a { padding: 15px 20px; } .my_menu > ul > li > a:hover, .my_menu > ul > li a:focus { color: #0086CA; background: #fff; } .my_menu ul ul { background: none grey; position: absolute; top: 100%; left: 0; right: 0; width: 100%; display: none; } .my_menu ul li:hover ul { display: block; } .my_menu ul ul a { padding: 5px 10px; } .my_menu ul ul a:hover, .my_menu ul ul a:focus { background: none black; } 

 <header> <nav class="my_menu"> <ul> <li> <a href="#">Home</a> </li> <li> <a href="#">menuitem1</a> <ul> <li><a href="#">item1</a></li> <li><a href="#">item2</a></li> <li><a href="#">item3</a></li> <li><a href="#">item4</a></li> </ul> </li> <li> <a href="#">menuitem2</a> <ul> <li><a href="#">item5</a></li> <li><a href="#">item6</a></li> <li><a href="#">item7</a></li> <li><a href="#">item8</a></li> </ul> </li> </ul> </nav> </header> 

Also at Playground .

Answer 2

You can probably clean this up but if you insist on a script method, this will work: It also should be easier to extend with less id's etc. just add markup. Working example here: http://jsfiddle.net/MarkSchultheiss/fLqs1nru/2/

function showmenu(targ, me) {
    $('.menuitem').removeClass('menu-on');
    $(me).parent().addClass('menu-on');
    $('.menu').hide();
    $('.' + targ).show();
}
$('.menuitem a').mouseenter(function () {
    var targ = $(this).parent().data("targetmenu");
    showmenu(targ, this);
});
$('nav').mouseleave(function () {
    $('.menuitem ').removeClass('menu-on');
    $('.menu').hide();
});

Adjust the markup, get rid of the div and add some classes. Add a data element for the target menu to use.

<nav>
    <ul class="ulparent">
        <li class="navitem" id="n-1"><a href="" id="a1">Home</a> 
            <li class="navitem menuitem" data-targetmenu="menu1"><a href="" id="a2">menuitem1</a>
            </li>
            <li class="navitem menuitem"  data-targetmenu="menu2"><a href="#" >menuitem2</a>
            </li>
            <ul class="menu menu1">
                <li><a href="">item1</a></li>
                <li><a href="">item2</a></li>
                <li><a href="">item3</a></li>
                <li><a href="">item4</a></li>
            </ul>
            <ul class="menu menu2">
                <li><a href="">item5</a></li>
                <li><a href="">item6</a></li>
                <li><a href="">item7</a></li>
                <li><a href="">item8</a></li>
            </ul>
    </ul>
</nav>

add this to the end of you CSS (which can probably be cleaner but this is only additive:)

.menu-on {
    background-color: white;
}
.menu-on a {
    color:#0086CA;
}
.menu {
    max-height:100px;
    display:none;
}