css制作下拉菜单（ie6的兼容）

css制作下拉菜单（ie6的兼容）

<title>下拉菜单的制作</title>
<style type="text/css">
#menu{
margin:0;
padding:0;
800px;
list-style-type:none;
font:"宋体" 14px;
}
#menu li{
float:left;
150px;
padding:0px;
margin:0 1px 0 0;
}
#menu li dl{
margin:0;
padding:0 0 10px 0;
background:#cd6 url(bottom.gif) no-repeat bottom left;
}
#menu li dl dt{
margin:0;
padding:5px;
text-align:center;
border-bottom:1px solid red;
background:#ed8 url(top.gif) no-repeat top left;
}
#menu li dl dt.orage{
background-color:#F96;
}
#menu li dl dt.lan{
background-color:#9CF;
}
#menu li dl dt.pule{
background-color:#CCF;
}
#menu li dl dt.pink{
background-color:pink;
}
#menu li dl dt.yellow{
background-color:yellow;
}

#menu dt a,#menu dt a:visited{
display:block;
color:#333;
text-decoration:none;
}
#menu li dl dd{
margin:0;
padding:0;
color:#fff;
background:#47a;

}
#menu li dl dd a,#menu li dl dd a:visited{
display:block;
color:#fff;
text-indent:10px;
text-decoration:none;
padding:4px 5px 4px 20px;
background:#47a url(arrw.gif) no-repeat 5px 0px;
background
}
#menu li dl dd.last{
border-bottom:1px red solid;
}
#menu li dd{
display:none;
}
#menu li dl:hover dd{
display:block;
}
#menu li dl dd a:hover{
background-color:#147;
color:#9cf;}

</style>
</head>

<body>
<ul id="menu">
   <li>
    <dl>
     <dt class="orage"><a href="#">北京市大学</a></dt>
      <dd><a href="#">清华大学</a></dd>
      <dd><a href="#">北京大学</a></dd>
      <dd class="last"><a href="#">人民大学</a></dd>
     </dl>
</li>

   <li>
    <dl>
      <dt class="lan"><a href="#">徐州市大学</a></dt>
       <dd><a href="#">矿大大学</a></dd>
       <dd><a href="#">师范大学</a></dd>
       <dd class="last"><a href="#">人民大学</a></dd>
     </dl>
   </li>

    <li>
      <dl>
       <dt class="pule"><a href="#">上海市大学</a></dt>
        <dd><a href="#">复旦大学</a></dd>
        <dd><a href="#">交通大学</a></dd>
        <dd class="last"><a href="#">上海大学</a></dd>
      </dl>
    </li>

    <li>
     <dl>
       <dt class="pink"><a href="#">南京市大学</a></dt>
         <dd><a href="#">理工大学</a></dd>
         <dd><a href="#">南京大学</a></dd>
         <dd class="last"><a href="#">航天大学</a></dd>
       </dl>
    </li>

     <li>
       <dl>
        <dt class="yellow"><a href="#">武汉市大学</a></dt>
         <dd><a href="#">武汉大学</a></dd>
         <dd><a href="#">师范大学</a></dd>
         <dd class="last"><a href="#">人民大学</a></dd>
        </dl>
      </li>
</ul>
</body>
</html>
ie6的兼容

<title>下拉菜单的制作</title>
<style type="text/css">
#menu{
margin:0;
padding:0;
800px;
list-style-type:none;
font:"宋体" 14px;
}
#menu li{
float:left;
150px;
padding:0px;
margin:0 1px 0 0;
}
#menu li dl{
150px;
margin:0;
padding:0 0 10px 0;
background:#cd6 url(bottom.gif) no-repeat bottom left;
}
#menu table{
border-collapse:collapse;
padding:0;
margin:-1px;
font-size:1em;
}
#menu li dl dt{
margin:0;
padding:5px;
text-align:center;
border-bottom:1px solid red;
background:#ed8 url(top.gif) no-repeat top left;
}
#menu li dl dt.orage{
background-color:#F96;
}
#menu li dl dt.lan{
background-color:#9CF;
}
#menu li dl dt.pule{
background-color:#CCF;
}
#menu li dl dt.pink{
background-color:pink;
}
#menu li dl dt.yellow{
background-color:yellow;
}

#menu dt a,#menu dt a:visited{
display:block;
color:#333;
text-decoration:none;
height:1em;
}
#menu li dl dd{
margin:0;
padding:0;
color:#fff;
background:#47a;

}
#menu li dd a,#menu li dd a:visited{
display:block;
color:#fff;
text-indent:10px;
text-decoration:none;
padding:4px 5px 4px 20px;
background:#47a url(arrw.gif) no-repeat 5px 0px;
background
}
#menu li dl dd.last{
border-bottom:1px red solid;
}
#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:#147;
color:#9cf;}

</style>
</head>

<body>

<ul id="menu">
   <li>
   <a href="#nogo">
   <table><tr><td>
    <dl>
     <dt class="orage"><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="lan"><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="pule"><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="pink"><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="yellow"><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>
</table>
</body>
</html>
相关阅读:
注释
 Java三种嵌入jsp的方法
 JSP page指令
 Web应用的目录结构
 Tomcat安装和配置
 动态网页和静态网页的区别
 B/S架构与C/S架构的区别
 URL
常用SQL查询语句
 SQL--Delete语句
原文地址：https://www.cnblogs.com/weixiao/p/2205603.html

最新文章
Java数据类型
 包装类
 高级控件下（一）
static关键字
 控件
 Object
日志
 多态
 事件
 Java运算符