下拉式列表
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html xmlns="http://www.w3.org/1999/xhtml">
<head>
<meta http-equiv="Content-Type" content="text/html; charset=gb2312" />
<title>下拉菜单的制作</title>
<style type="text/css">
#menu{
margin:0;
padding:0;
width:900px;
list-style-type:none;
font:14px "宋体";
}
#menu li{
float:left;
width:150px;
padding:0px;
margin:0 1px 0 0;
}
#menu li dl{
margin:0px;
padding:0 0 10px 0;
background:#cb6 url(bottom.gif) no-repeat bottom left;
}
#menu li dl dt{
margin:0px;
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.blue{
background-color:#FF66CC;
}
#menu li dl dt.green{
background-color:green;
}
#menu li dl dt.organge{
background-color: #66FFFF;
}
#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 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(arrow.gif) no-repeat 5px 0px;
}
#menu li dl dd.last{
border-bottom:1px red solid;
}
#menu li dd{
display:none;
}
/*下拉菜单的显示*/
#menu li:hover dd{
display:block;
}
#menu li 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="blue"><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="organge"><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>
