下拉菜单的创设

转自:http://www.cnblogs.com/yzst/archive/2011/10/10/2205548.html

<html >
<head>
<meta http-equiv=”Content-Type” content=”text/html; charset=utf-8″
/>
<title>下拉菜单的成立</title>
</head>
<style type=”text/css”>
#menu{
 margin:0;
 padding:0;
 width:800px;
 list-style-type:none;
 font:14px “宋体”;
 
}
#menu li{
 float:left;
 width:150px;
 padding:0;
 margin:0 1px 0 0;
}
#menu li dl{
 margin:0;
 padding:0 0 10px 0;
 background:#cb6 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.red{
 background-color:red;
 }
#menu li dl dt.green{
 background-color:green;
 }
#menu li dl dt.yellow{
 background-color:yellow;
 }
#menu li dl dt.pink{
 background-color:pink;
 }
#menu li dl dt.orange{
 background-color:orange;
 }
#menu dt a,#menu dt a:visited{
 display:block;
 color:#333;
 text-decoration:none;
}
#menu li dd{
 display:none;
 margin:0;
 padding:0;
 color:#fff;
 background:#47a;
}
#menu li dl dd a,#menu li dl dd a:visited{
 display:block;
 text-decoration:none;
 color:#fff;
 text-indent:10px;
 padding:4px 5px 4px 20px;
 background:#47a url(a.gif) no-repeat 10px 0px;
}
#menu li dl dd.last{
 border-bottom: 1px solid red;
}
#menu li: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=”red”><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=”green”><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>
     <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=”orange”><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>

发表评论

电子邮件地址不会被公开。 必填项已用*标注