Edit in JSFiddle

$('#menu > ul > li').on('mouseenter', function(){
    $('>ul', this).stop().fadeIn(300);
}).on('mouseleave', function(){
    $('>ul', this).stop().fadeOut(300);
});

<div id="menu">
    <ul>
        <li> one
            <ul>
                <li>foobar 1</li>
                <li>foobar 2</li>
                <li>foobar 3</li>
            </ul>
        </li>
        <li> two
            <ul>
                <li>foobar 1</li>
                <li>foobar 2</li>
                <li>foobar 3</li>
            </ul>
        </li>
        <li> three
            <ul>
                <li>foobar 1</li>
                <li>foobar 2</li>
                <li>foobar 3</li>
            </ul>
        </li>
    </ul>
</div>

/* hide nested lists */
#menu > ul > li > ul { display: none; }