<head>
 <script src="https://ajax.googleapis.com/ajax/libs/jquery/1.11.1/jquery.min.js"></script> 
</head> 
<ul id="menu">
    <li><a href="">Menu</a>
        <ul class="child_menu">
            <li><a href="#">Child Menu</a></li>
            <li><a href="#">Child Menu</a>
                <ul class="child_menu">
                    <li><a href="#">Grandchild Menu</a></li>
                    <li><a href="#">Grandchild Menu</a></li>
                </ul>
            </li>
        </ul>
    </li>
    <li><a href="">Menu</a>
        <ul class="child_menu">
            <li><a href="#">Child Menu</a></li>
            <li><a href="#">Child Menu</a>
                <ul class="child_menu">
                    <li><a href="#">Grandchild Menu</a></li>
                    <li><a href="#">Grandchild Menu</a></li>
                </ul>
            </li>
        </ul>
    </li>
</ul>
*{
	margin:0;
	padding:0;	
}
ul#menu li {
	position: relative;
	float: left;
	margin-right: 1px;
	padding-top: .6em;
	width: 10em;
	height: 2em;
	background: #333;
	border-bottom: solid #000 1px;
	text-align: center;
	*display: inline;
	*zoom: 1;
	list-style:none;
}
ul#menu li a {
	display: block;
	width: 100%;
	height: 100%;
	color: #fff;
	font-weight: bold;
	text-decoration: none;
}
ul.child_menu{
	display: none;
	padding-top: 1px;
	*position: relative;
	*zoom: 1;
}
ul.child_menu li {
	float: none;
}
ul.child_menu li ul.child_menu {
	position: absolute;
	top: 0;
	left: 10em;
}
$(function(){
	$("ul#menu li").hover(function(){
		$("> ul:not(:animated)" , this).animate({
			height : "toggle",
			opacity : "toggle"
		}, 500 );
	},
	function(){
		$("> ul" , this).fadeOut("slow");
	});
});

External CSS

This Pen doesn't use any external CSS resources.

External JavaScript

This Pen doesn't use any external JavaScript resources.