zwei Versionen von show/hide per jQuery

Original: http://jsfiddle.net/rodneyrehm/gPNFB/

by Jens Grochtdreis

HTML

<div id="menu1">
    <ul>
        <li> fooo
            <ul>
                <li>bar!</li>
            </ul>
        </li>
    </ul>
</div>
<hr>
<div id="menu2">
    <ul>
        <li> fooo
            <ul>
                <li>bar!</li>
            </ul>
        </li>
    </ul>
</div>

CSS

ul > li > ul { display: none; }

JavaScript

// original
$('#menu1 > ul > li').on('mouseenter', function(){
    $('>ul', this).stop().fadeIn(300);
}).on('mouseout', function(){
    $('>ul', this).stop().fadeOut(300);
});

// code it like you meant it!
$('#menu2').on('mouseenter mouseleave', '#menu2 > ul > li', function(e) {
    $(this).children('ul').stop()[e.type === 'mouseenter' ? 'fadeIn' : 'fadeOut'](300);
});