Menu

Menu that on hover, displays sub menu.

by emgee

HTML

<div id="nav">
    
    <!--START MENU-->
    <div class="menu_1" id="menu_1">Menu 1
        <div id="sub_menu_1" class="sub_menu">
        <ul>
            <li><a href="">Sub Menu Item 1</a></li>
            <li><a href="">Sub Menu Item 2</a></li>
            <li><a href="">Sub Menu Item 3</a></li>
        </ul>
        </div>
    </div>
    <div class="menu_2" id="menu_2">Menu 2
        <div id="sub_menu_2" class="sub_menu">
        <ul>
            <li><a href="">Sub Menu Item A</a></li>
            <li><a href="">Sub Menu Item B</a></li>
            <li><a href="">Sub Menu Item C</a></li>
        </ul>
    </div>
    </div>
    <div class="menu_3" id="menu_3">Menu 3
    <div id="sub_menu_3" class="sub_menu">
        <ul>
            <li><a href="">Sub Menu Item X</a></li>
        </ul>
    </div>    
    </div>
    <!--END MENU-->
</div>

CSS

body, html{
		padding:10px 10px;
	}
	#nav{
		position:relative;
		height:30px;
		width:770px;
		cursor:default;
	}
	.menu_1, .menu_2, .menu_3{
		position:relative;
		font-size:120%;
		font-weight:bold;
		background:#CCC000;
		height:50px;
		width:150px;
		float:left;
		text-align:center;
		border:1px solid #000000;
		line-height:2.2;
	}
	.sub_menu{
	    display:none;
		position:absolute;
		background:orange;
		width:250px;
		border:1px solid #000000;
		top:50px;
        margin:0;
        padding:0;
	}
	a{
		text-decoration:none;
		color: #000000;
	}
	ul{
		list-style:none;
		padding:5px 10px;
	}
	li{
		padding:2px 10px;
	}

JavaScript

$("#nav").on("mouseover", "div", function(){
    $(this).find(".sub_menu").show();
});
$("#nav").on("mouseleave", "div, .sub_menu", function(){
    $(this).find(".sub_menu").hide();
});