Question

suppose we have a menu that two of the items contain a submenu , here is html :

         <div id="Menubar">
            <ul>
                <li><a href="#">About</a></li>
        <li><a href="#">Contact</a>
        <ul >
                        <li class="dropItem"><a href="#">By Mail</a></li>
                        <li class="dropItem"><a href="#">By Phone</a></li>         
                    </ul>                    
                </li>  
                <li><a href="#">Search</a></li> 
                <li><a href="#">Gallery</a>
                    <ul>
                        <li class="dropItem"><a href="#">Video</a></li>
                         <li class="dropItem"><a href="#">Audio</a></li> 
                        <li class="dropItem"><a href="#">Images</a></li>         
                        <li class="dropItem"><a href="#">Powerpoint</a></li>
                    </ul>
                </li>                                    
                <li><a href="#">News</a></li>                                                 
                <li><a href="#">Home</a></li>

            </ul>
        </div>

So it is like :

About | Contact | Search | Gallery | News | Home

    -------            -------

    ByMail             Video

    ByPhone            Audio

                       Images

So how can i select li that contains ul , and then make ul visible;

I have tried some thing like this :

$(document).ready(function(){
        //start//
        var drop = $('#Menubar ul li');
        if(drop.children().last().is('ul')){
              mouseover:function(){
                  $(this).find('ul').fadeIn('normal');
              }
         });
        }


});

any ideas ?

Answer 1

How about this?

$("#Menubar li > ul").parent().hover(function() {
    $(this).children("ul").stop().fadeIn();
}, function() {
    $(this).children("ul").fadeOut();
});​

DEMO: http://jsfiddle.net/ZhYDf/1/

---

Another variant of the selector:

$("#Menubar li:has(ul)").hover(function() {
    $(this).children("ul").stop().fadeIn();
}, function() {
    $(this).children("ul").fadeOut();
});​