Multi-Level Drop Down Menu (多层下拉菜单)

HTML：

<ul class="menubar">  <li><a href="#">Menu 1</a>    <ul>      <li><a href="#">My My My My Menu 1.1</a></li>      <li><a href="#">My My My My Menu 1.2</a></li>      <li><a href="#">My My My My Menu 1.1</a></li>      <li><a href="#">My My My My Menu 1.2</a></li>    </ul>  </li>  <li><a href="#">Menu 2</a>    <ul>      <li><a href="#">My Menu 1.1</a></li>      <li><a href="#">My Menu 1.1</a></li>    </ul>  </li>  <li><a href="#">Menu 3</a>    <ul>      <li><a href="#">Menu 3.1</a></li>      <li><a href="#">Menu 3.2</a>        <ul>          <li><a href="#">Your Menu 3.2.1</a></li>          <li><a href="#">Your Menu 3.2.2</a></li>          <li><a href="#">Your Menu 3.2.3</a></li>          <li><a href="#">Your Menu 3.2.3</a>             <ul>              <li><a href="#">Menu 3.2.1.1</a></li>              <li><a href="#">Menu 3.2.2.1</a></li>              <li><a href="#">Menu 3.2.3.1</a></li>              <li><a href="#">Menu 3.2.2.1</a></li>              <li><a href="#">Menu 3.2.3.1</a></li>            </ul>          <li>          <li><a href="#">Your Menu 3.2.3</a>             <ul>              <li><a href="#">Your Menu 3.2.1.1</a></li>              <li><a href="#">Your Menu 3.2.2.1</a></li>              <li><a href="#">Your Menu 3.2.3.1</a></li>            </ul>          <li>          <li><a href="#">Your Menu 3.2.3</a>             <ul>              <li><a href="#">Your Menu 3.2.1.1</a></li>              <li><a href="#">Your Menu 3.2.2.1</a></li>              <li><a href="#">Your Menu 3.2.3.1</a></li>            </ul>          <li>          <li><a href="#">Your Menu 3.2.3</a>             <ul>              <li><a href="#">Your Menu 3.2.1.1</a></li>              <li><a href="#">Your Menu 3.2.2.1</a></li>              <li><a href="#">Your Menu 3.2.3.1</a></li>            </ul>          <li>          <li><a href="#">Your Menu 3.2.3</a></li>        </ul>      </li>      <li><a href="#">Menu 3.3</a></li>    </ul>  </li></ul>

CSS File

<style type="text/css">div.outframe {    margin:auto;    width:980px;    padding:0px 17px 10px 17px;}ul.menubar a {    font: 11px Tahoma;}ul.menubar a:link, ul.menubar a:visited, ul.menubar a:hover {    color: #ffffff;    text-decoration:none;}ul.menubar ul, ul.menubar li {    list-style:none;    margin:0;     padding:0;}ul.menubar > li {    background-color: #17304E;    float: left;    border-right: 1px solid white;}ul.menubar > li.active {    background-color: #0EB8FF !important;}ul.menubar > li > a {    display: block;    text-align: center;    width: 90px;    height: 29px;    line-height:29px;    white-space: nowrap;    font-weight: bold;}ul.menubar > li > ul {    margin-top:1px;}ul.menubar ul {    border-left: 4px solid #0EB8FF;    position:absolute;     z-index:1;    display:none;}ul.menubar ul li {    background-color: #33537B;}ul.menubar ul li.active {    background-color: #17304E !important;}ul.menubar ul li.menu {    background-image: url(arrowa.gif);    background-repeat: no-repeat;    background-position: right;}ul.menubar ul li a {    display: block;    text-align: left;    height: 27px;    line-height:27px;    padding: 0px 20px 0px 13px;    white-space: nowrap;}ul.menubar ul ul {    left: 79px;    top: 27px;}</style>

JAVASCRIPT

<script type="text/javascript">$(function() {    $('ul.menubar ul > li').has('ul').each(function(index) {        $(this).addClass('menu');    });    $('ul.menubar li').mouseover(function() {        var li = $(this);               li.addClass('active');        li.siblings().find(' > ul').hide();                var ul = li.find(' > ul');        if ( li.is('.menu') ) {            var top = li.position().top;            var width = li.width();            ul.css('left', width + 1).css('top', top);        }        ul.fadeIn('show');    });    $('ul.menubar li').mouseout(function() {        var li = $(this);        li.removeClass('active');                window.setTimeout(function() {            if ( !li.is('.active') ) {                li.find(' > ul').hide();            }        }, 50);    });});</script>