SIANZUN: Personal Blog

<div id="nav"> <!-- nav container -->

<ul>

<li>item <!-- main item -->

<ul> <!-- item submenu -->

<li>sub item</li>

</ul>

</li>

<ul>

</div>

<div id="nav">

<ul>
<li><a href="#">Zocia</a>
<ul class="submenu">
<li><a href="http://blog.zocia.com">Zocia Blog</a></li>
<li><a href="http://www.ns-services.blogspot.com">Zo Hornbill</a></li>

<li><a href="http://www.itzomi.blogspot.com">IT Zomi</a></li>
</ul>
</li>

<li><a href="#">Tech News</a>
<ul class="submenu">
<li><a href="http://www.zomi.net">Zomi.Net</a></li>
<li><a href=http://www.zocia.org>Zocia</a></li>
</ul>
</li>
<ul>
<div>

#nav{

height:32px;
line-height:32px;
background:#3B5998;
padding:0 10px;
}

#nav ul,
#nav ul li {

margin:0;
padding:0;
list-style:none;

}
#nav ul li{

float:left;
display:block;

}

#nav ul li a:link,
#nav ul li a:visited{

color:#FFF;
font-size:14px;
font-weight:bold;
text-decoration:none;
padding:0 20px 0 6px;
display:block;

}
#nav ul li a:hover{

color:#EBEFF7;

}
#nav ul li ul li{

float:none;
display:block;

}
#nav ul li ul li a:link,
#nav ul li ul li a:visited{

color:#444;
font-size:11px;
font-weight:bold;
text-decoration:none;
padding:0 10px;
clear:both;
border-bottom:solid 1px #DEDEDE;

}
#nav ul li ul li a:hover{

color:#3B5998;
background:#EBEFF7;

}

.submenu {

position: absolute;
width: 160px;
background: #FFF;
padding: 10px;
border: solid 1px #2E4B88;
border-top: none;
display: none;
line-height: 26px;
z-index: 1000;

}

<script type="text/javascript">
function nav(){

$('div#nav ul li').mouseover(function() {

$(this).find('ul:first').show();

});

$('div#nav ul li').mouseleave(function() {

$('div#nav ul li ul').hide();

});

$('div#nav ul li ul').mouseleave(function() {

$('div#nav ul li ul').hide();;

});

};

$(document).ready(function() {

nav();

});
</script>