下拉菜单

本案例是制作一个下拉菜单，图1为鼠标离开菜单是子菜单未打开的效果，图2是子菜单打开后的效果。IE6同样兼容。

 图1

图2

<style type="text/css">
#menu{
 margin:0px;
 padding:0px;
 width:800px;
 list-style-type:none;
 font:14px "宋体";
 }
#menu li{
 float:left;
 width:150px;
 padding:0px;
 margin:0 1px 0 0;
 }
#menu li dl{
 width:150px;
 margin:0px;
 padding:0 0 10px 0;
 background:#cd6 url(img/bottom.gif) no-repeat bottom left;
 }
#menu li dl dt{
 line-height:25px;
 margin:0px;
 padding:0px;
 text-align:center;
 border-bottom:1px solid red;
 background:#ed8 url(img/top.gif) no-repeat top left;
 }
#menu li dt.hs{
 background-color:#F06;
 }
#menu li dt.ls{
 background-color:#090;
 }
#menu li dt.cs{
 background-color:#FC0;
 }
#menu li dt.zise{
 background-color:#90F;
 }
#menu dt a,#menu dt a:visited{
 display:block;
 color:#333;
 text-decoration:none;
 }
#menu li dd{
 margin:0px;
 padding:0px;
 color:#fff;
 background:#0CC;
 }
#menu li dd a,#menu li dd a:visited{
 height:1em;
 display:block;
 color:#fff;
 text-indent:3px;
 text-decoration:none;
    padding:4px 5px 4px 20px;
 background:#0cc url(img/arrow.gif) no-repeat 1px 1px;
 }
#menu li dd.last{
 border-bottom:1px solid red;
 }
#menu li dd{
 display:none;
 }
#menu li:hover dd,#menu li a:hover dd{
 display:block;
 }
#menu li:hover,#menu li a:hover{
 border:0;
 }
#menu li dd a:hover{
 background-color:#0FF;
 color:#9cf;
 }

#menu table {
 border-collapse:collapse;
 padding:0;
 margin:-1px;
 font-size:1em;
 }
</style>

<ul id="menu">
  <li>
   <a href="#nogo"><table><tr><td>
    <dl>
      <dt><a href="#">北京市的大学</a></dt>
         <dd><a href="#">清华大学</a></dd>
         <dd><a href="#">北京大学</a></dd>
         <dd class="last"><a href="#">人民大学</a></dd>
      </dl>
    </td></tr></table></a>
  </li>
  <li>
   <a href="#nogo"><table><tr><td>
    <dl>
      <dt class="hs"><a href="#">徐州市的大学</a></dt>
        <dd><a href="#">矿业大学</a></dd>
        <dd><a href="#">师范大学</a></dd>
        <dd class="last"><a href="#">人民大学</a></dd>
    </dl>
    </td></tr></table></a>
  </li>
  <li>
   <a href="#nogo"><table><tr><td>
    <dl>
      <dt class="cs"><a href="#">上海市的大学</a></dt>
        <dd><a href="#">复旦大学</a></dd>
        <dd><a href="#">上海大学</a></dd>
        <dd class="last"><a href="#">交通大学</a></dd>
    </dl>
    </td></tr></table></a>
  </li>
  <li>
   <a href="#nogo"><table><tr><td>
    <dl>
      <dt class="ls"><a href="#">南京市的大学</a></dt>
        <dd><a href="#">理工大学</a></dd>
        <dd><a href="#">南京大学</a></dd>
        <dd class="last"><a href="#">航天大学</a></dd>
    </dl>
    </td></tr></table></a>
  </li>
  <li>
   <a href="#nogo"><table><tr><td>
    <dl>
      <dt class="zise"><a href="#">武汉市的大学</a></dt>
        <dd><a href="#">师范大学</a></dd>
        <dd><a href="#">武汉大学</a></dd>
        <dd class="last"><a href="#">人民大学</a></dd>
    </dl>
    </td></tr></table></a>
  </li>
</ul>

转载于:https://www.cnblogs.com/93wei/archive/2011/10/14/2212099.html