SO fiddle

Test Fiddle mainly for SO Questions

by Nick Craver

HTML

<link rel="stylesheet" href="http://ajax.googleapis.com/ajax/libs/jqueryui/1.8.4/themes/overcast/jquery-ui.css">
<ul class="menu">
    <li>Menu item with submenu
        <ul><li>Sub-menu item</li></ul>
    </li>
    <li>Menu item without submenu</li>
</ul>

CSS

.menu, .menu ul { margin:0; padding:0; list-style-type:none; list-style-position:outside; position:relative; }
.menu a { color:#a6a6a6; display:block; padding:6px 10px; }             
.menu li { float:left; position:relative; width:200px; }
.menu ul { position:absolute; display:none; width:200px; top:0; left:200px; }
.menu li ul a { width:200px; height:auto; float:left; }
.menu ul ul { top:auto; }
.menu li ul ul { left:200px; margin:0; }
.menu li:hover ul ul, .menu li:hover ul ul ul, .menu li:hover ul ul ul ul { display:none; }
.menu li:hover ul, .menu li li:hover ul, .menu li li li:hover ul, .menu li li li li:hover ul { display:block; }

JavaScript

function Mx_menu(){
    $(".menu ul").css({display: "none"}); // Opera Fix
    $(".menu li").hover(function(){
                $(this).find('ul:first').css({visibility: "visible",display: "none"}).show(400);
            },function(){
                $(this).find('ul:first').css({visibility: "hidden"});
    });

}    

    $(document).ready(function(){     
        $(".menu li ul").before(' +');
        Mx_menu();
    });