Question

I have this html

<ul id="menu">
    <li><input type="button" id="btnMenu-1" class="btnMenu" value="pitillo"></li>
        <ul class="subMenu">
            <li><input type="button" id="SubBtn-1" class="btnSubMenu" value="sub-pitillo"></li>
    </ul>
    <li><input type="button" id="btnMenu-2" class="btnMenu" value="tal"></li>
        <ul class="subMenu">
            <li><input type="button" id="subBtn-2" class="btnSubMenu" value="sub-tal"></li>
        </ul>
</ul>

I want to select the sub menu but not by the class, in the moment when the user is in mouse enter event i tried like this but it doesn’t work

$(document).ready(initialize);

function initialize(){
    $(".btnMenu").button();
    $("#menu li").hover(mouseEntry,mouseOut);
    $('.btnSubMenu').button();
}

function mouseEntry(){
    $('ul', this).slideDown(100);
 }

function mouseOut(){
    $('ul',this).slideUp(100);
}

this is my live demo

Answer 1

I’m not sure if this is what you’re after but changing the HTML to:

<ul id="menu">
    <li><input type="button" id="btnMenu-1" class="btnMenu" value="pitillo">
        <ul class="subMenu">
            <li><input type="button" id="SubBtn-1" class="btnSubMenu" value="sub-pitillo"></li>
        </ul>
    </li>
    <li><input type="button" id="btnMenu-2" class="btnMenu" value="tal">
        <ul class="subMenu">
            <li><input type="button" id="subBtn-2" class="btnSubMenu" value="sub-tal"></li>
        </ul>
    </li>
</ul>

will put the subMenu into the menu so that your JavaScript actually slides it out.
You’ll also have to make sure you select only the ‘outer’ li. This is done by adding a ‘>’ to the selector:

function initialize(){
    $(".btnMenu").button();
    $("#menu>li").hover(mouseEntry,mouseOut);
    $('.btnSubMenu').button();
}