Simple selector question.
How do I select the top level <li> elements, but not their children <li> elements? In other words, why doesn't this work?
$().ready(function() {
$('#nav li:not(li li)').mouseenter(
function() {
$('#nav li ul').fadeOut(0);
$(this).children('ul').fadeIn('slow');
}
);
});
---------------
#nav {
position:relative;
}
#nav li {
float:left;
}
#nav li ul {
display:none;
position:absolute;
}
---------------
<ul id="nav">
<li>1
<ul>
<li>a</li>
<li>b</li>
<li>c</li>
<li>d</li>
</ul>
</li>
<li>2</li>
</ul>