<style type="text/css">
ul{margin:0;padding:0;}
.menu{font-size:12px;z-index:100;}
.menu ul{list-style:none;}
/*Define first level descendants*/
.menu li{float:left;position:relative;padding:1px;}
.menu table {position:absolute; top:0; left:0;}
.menu a{display:block;border:1px solid #9d9da1;background:#e0e2eb;color:#000000;text-decoration:none;height:18px;white-space:nowrap;}
.menu a:hover{background:#bbb7c7;color:#000000;}
.menu ul ul {visibility:hidden;position:absolute;left:1px;top:21px;border:1px outset}
/*Define the styles of those descendants which are lower than first level. They inherit styles of first level, and redefine some styles.*/
.menu ul li ul li{width:130px;height:18px;background-color:#dddddd;padding:0px;}
.menu ul li ul a{display:block;background-color:#ffffff;border-width:0px;height:100%;width:100%}
.menu ul li ul li ul {left:129px;top:0px;}
/*Control descendants' visibility. If you want to add a lower level descendant, please insert 'ul li ' behind 'menu'*/
/*first level*/
.menu ul li:hover ul,.menu ul a:hover ul{visibility:visible}
.menu ul li:hover ul li ul,.menu ul a:hover ul li ul{visibility:hidden}
/*second level*/
.menu ul li ul li:hover ul,.menu ul li ul a:hover ul{visibility:visible}
.menu ul li ul li:hover ul li ul,.menu ul li ul a:hover ul li ul{visibility:hidden}
/*third level*/
.menu ul li ul li ul li:hover ul,.menu ul li ul li ul a:hover ul{visibility:visible}
.menu ul li ul li ul li:hover ul li ul,.menu ul li ul li ul a:hover ul li ul{visibility:hidden}
</style>
<!--menu items-->
<div class="menu">
<ul>
<li>
<a href="#"> Menu One <!--[if IE 7]><!--></a><!--<![endif]--><!--[if lte IE 6]><table><tr><td><![endif]-->
<ul>
<li><a href="#"> aaa </a></li>
<li><a href="#"> bbb </a></li>
<li><a href="#"> ccc </a></li>
<li>
<a href="#"> Menu One Child >><!--[if IE 7]><!--></a><!--<![endif]--><!--[if lte IE 6]><table><tr><td><![endif]-->
<ul>
<li><a href="#"> aaa </a></li>
<li><a href="#"> bbb </a></li>
<li><a href="#"> ccc </a></li>
<li>
<a href="#"> Menu One Child >><!--[if IE 7]><!--></a><!--<![endif]--><!--[if lte IE 6]
><table><tr><td><![endif]-->
<ul>
<li><a href="#"> aaa </a></li>
<li><a href="#"> bbb </a></li>
<li><a href="#"> ccc </a></li>
</ul>
<!--[if lte IE 6]></td></tr></table></a><![endif]-->
</li>
</ul>
<!--[if lte IE 6]></td></tr></table></a><![endif]-->
</li>
</ul>
<!--[if lte IE 6]></td></tr></table></a><![endif]-->
</li>
<li>
<a href="#"> Menu Two <!--[if IE 7]><!--></a><!--<![endif]--><!--[if lte IE 6]><table><tr><td><![endif]-->
<ul>
<li><a href="#"> aaa </a></li>
<li><a href="#"> bbb </a></li>
<li><a href="#"> ccc </a></li>
<li>
<a href="#"> Menu Two Child >><!--[if IE 7]><!--></a><!--<![endif]--><!--[if lte IE 6]><table><tr><td><![endif]-->
<ul>
<li><a href="#"> aaa </a></li>
<li><a href="#"> bbb </a></li>
<li><a href="#"> ccc </a></li>
</ul>
<!--[if lte IE 6]></td></tr></table></a><![endif]-->
</li>
</ul>
<!--[if lte IE 6]></td></tr></table></a><![endif]-->
</li>
</ul>
</div>