horizontal menu: slide down submenu on hover

by John Doe

HTML

<nav>
    <ul><li>Item 1
            <ul>
                <li><a href="http://www.google.com" target="new">Lorem ipsum</a></li>
                <li><a href="http://www.google.com">Lorem ipsum</a></li>
            </ul>
        </li>
        <li>Item 2
            <ul>
                <li><a href="http://www.google.com">Lorem ipsum</a></li>
                <li><a href="http://www.google.com">Lorem ipsum</a></li>
            </ul>
        </li>
    </ul>
</nav>

CSS

body {
    padding: 15px;
    font-family: Tahoma;
}
nav {
    width: 250px;
}
ul {
    list-style: none;
}
li {
    background: #ddd;
    width: 100%;
    line-height: 25px;
    margin: 0 0 10px;
    padding: 5px 10px;
    text-align: left;
    cursor: pointer;
}
li ul {
    display: none;
}
li ul li {
    position: relative;
    padding: 5px;
    text-align: left;
    box-sizing: border-box;
}

JavaScript

(function($) {
    $('ul li').mouseover(function() {
        $('ul',this).stop().slideDown(600, 'linear');
    });
    $('li, li ul').mouseout(function() {
        $('li ul').stop().slideUp(600, 'linear');
    });
})(jQuery);