Se necesita jQuery selector para <ul> dentro de un <li> flotante - jquery, jquery-selectores

Aquí está mi código XHTML:

<ul id="MenuBar1">
<li>
<div class="menuBox">Category 1</div>
</li>
<li class="hasasubmenu">
<div class="menuBox">Category 2</div>
<ul>
<li><a href="link.html">Link 1</a></li>
<li><a href="link.html">Link 2</a></li>
<li><a href="link.html">Link 3</a></li>
</ul>
</li>
<li class="hasasubmenu">
<div class="menuBox">Category 3</div>
<ul>
<li><a href="link.html">Link</a></li>
<li><a href="link.html">Link</a></li>
</ul>
</li>
<li>
<div class="menuBox">Category 4</div>
</li>
</ul>

En realidad, quiero crear un menú con interacción de desplazamiento para mostrar subenlaces. (de todos modos, un menú estándar :))

Y aquí está mi código JS:

/* menu handler */
$(document).ready(function(){
$("#MenuBar1 li.hasasubmenu").hover(function(){
**(selector that select the sub <ul> of the hovered <li>)**.toggle();
});
});

¿Me pueden ayudar a encontrar el selector (en negrita (**) en el código JS) que se utilizará para alternar?

Respuestas

niños() o encontrar()

/* menu handler */
$(document).ready(function(){
$("#MenuBar1 li.hasasubmenu").hover(function(){
$(this).children("ul").toggle(); // select the ul
});
});

Ejemplo: http://jsfiddle.net/niklasvh/2GY4V/

¿Por qué estás usando jQuery para esto? Puedes hacer esto usando solo CSS http://jsfiddle.net/XBdAL/

<ul>
<li>List Item 1</li>
<li>List Item 1
<ul>
<li>List Item 2</li>
<li>List Item 2
</ul>
</li>
</ul>

y el CSS

ul {
list-style: none;
width: 150px;
}

li {
position: relative;
border: 1px solid #ffffff;
}

li:hover {
z-index: 1;
cursor: pointer;
}

ul ul {
position: absolute;
display: none;
left: 140px;
top: 4px;
}

li:hover ul ul {
display: none;
}

li:hover ul, li:hover li:hover ul {
display: block;
}

Debería usar solo CSS, porque hay algunos usuarios / brosers que no son compatibles con JS.