基于CSS样式的下拉菜单

<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="#">&nbsp;Menu One&nbsp;<!--[if IE 7]><!--></a><!--<![endif]--><!--[if lte IE 6]><table><tr><td><![endif]-->
             <ul>
  <li><a href="#">&nbsp;aaa&nbsp;</a></li>
  <li><a href="#">&nbsp;bbb&nbsp;</a></li>
  <li><a href="#">&nbsp;ccc&nbsp;</a></li>

          <li>
               <a href="#">&nbsp;Menu One Child >><!--[if IE 7]><!--></a><!--<![endif]--><!--[if lte IE 6]><table><tr><td><![endif]-->
               <ul>
    <li><a href="#">&nbsp;aaa&nbsp;</a></li>
    <li><a href="#">&nbsp;bbb&nbsp;</a></li>
    <li><a href="#">&nbsp;ccc&nbsp;</a></li>

            <li>
                 <a href="#">&nbsp;Menu One Child >><!--[if IE 7]><!--></a><!--<![endif]--><!--[if lte IE 6]

><table><tr><td><![endif]-->
                 <ul>
      <li><a href="#">&nbsp;aaa&nbsp;</a></li>
      <li><a href="#">&nbsp;bbb&nbsp;</a></li>
      <li><a href="#">&nbsp;ccc&nbsp;</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="#">&nbsp;Menu Two&nbsp;<!--[if IE 7]><!--></a><!--<![endif]--><!--[if lte IE 6]><table><tr><td><![endif]-->
             <ul>
  <li><a href="#">&nbsp;aaa&nbsp;</a></li>
  <li><a href="#">&nbsp;bbb&nbsp;</a></li>
  <li><a href="#">&nbsp;ccc&nbsp;</a></li>

          <li>
               <a href="#">&nbsp;Menu Two Child >><!--[if IE 7]><!--></a><!--<![endif]--><!--[if lte IE 6]><table><tr><td><![endif]-->
               <ul>
    <li><a href="#">&nbsp;aaa&nbsp;</a></li>
    <li><a href="#">&nbsp;bbb&nbsp;</a></li>
    <li><a href="#">&nbsp;ccc&nbsp;</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>