jQuery .toggle() child issue

Question

I am having an issue where my jQuery will toggle when clicking within .mini-nav li rather than just .nav ul li. What would be the best way to fix this issue?

HTML:

<div class="nav">
    <ul>
        <li>
            <img src="./assets/icon-down_arrow.png" />LoLNode
            <ul class="mini-nav">
                <li>Home</li><br />
                <li>Popular</li><br />
                <li>Create</li><br />
            </ul>
        </li>
    </ul>
</div>

CSS:

.nav {
    padding:5px 0;
    background: -webkit-linear-gradient(#333, #222); 
    background: -o-linear-gradient(#333, #222);
    background: -moz-linear-gradient(#333, #222);
    background: linear-gradient(#333, #222);
}
.nav > ul {
    width:1000px;
    margin:auto auto;
    list-style-type:none;
}
.nav ul > li {
    display:inline-block;
    padding:10px 5px;
    font-size:16px;
    color:#FFF;

    -webkit-user-select:    none;
    -khtml-user-select:     none;
    -moz-user-select:       none;
    -o-user-select:         none;
    user-select:            none;
}
.nav ul li > .mini-nav {
    min-width:92px;
    position:absolute;
    top:51px;
    list-style-type:none;
    background:#222;
    border-bottom-left-radius:5px;
    border-bottom-right-radius:5px;

    display:none;
}
.nav ul li .mini-nav > li {
    display:inline-block;
    padding:2px 5px;
    background:#222;
    border-bottom-left-radius:5px;
    border-bottom-right-radius:5px;
    font-size:12px !important;
    color:#FFF;
}

jQuery:

$('.nav ul > li:first-child').on('click', function() {
    $('ul.mini-nav').toggle();
});

Answer 1

You need to stop event propagation when you click inner li, so that event doesn't bubble up to the outer list where it's handled, toggling inner one:

$('.nav > ul > li:first-child').on('click', function () {
    $('ul.mini-nav').toggle();
});

$('ul.mini-nav').on('click', function (e) {
    e.stopPropagation();
});

Demo: http://jsfiddle.net/8op8qt8w/

Also note that I fixed selector a little

.nav > ul > li:first-child
     ^-- here

One more thing: remove <br> after li. You want to make li block instead of inline-block if you want them to be rendered on the next line.