标签：
<!DOCTYPE html>
<html lang="zh-cn">
<head>
<meta charset="UTF-8">
<title>选项卡的制作</title>
<script src="../js/try.js"></script>
<style>
/*整体设置*/
*{
margin:0;
padding:0;
}
#menu{
width:610px;
list-style-type:none; /* 取消点 */
font:12px Arial;
}
#menu li{
float:left;
margin:0 1px 0 0;
width:150px;
}
/*设置菜单项*/
#menu li dl{
width:150px;
padding:0 0 10px 0;
background-color:#cb6;
}
#menu li dt a,#menu li dd a{
display:block;
}
/*设置菜单项dt*/
#menu li dt{
padding:5px;
text-align:center;
border-bottom:1px solid #b00;
}
#menu li dt.orange{
background-color: #fa5;
}
#menu li dt.yellow{
background-color: #ee5;
}
#menu li dt.green{
background-color:#5e5;
}
#menu li dt.blue{
background-color:#5cf;
}
#menu li dt a,#menu li dt a:visited{
display:block;
color:#333;
text-decoration: none;
}
/*设置菜单项dd*/
#menu li dd{
color:#fff;
background-color:#47a;
}
#menu li dd.last{
border-bottom:1px solid #b00;
}
#menu li dd a,#menu li dd a:visited{
display:block;
color:#fff;
text-decoration: none;
padd:4px 5px 4px 20px;
background-color:#47a;
height:1em;
}
/*关闭子菜单*/
#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>
<dl>
<dt class="orange"><a href="">Artech Studio</a></dt>
<dd><a href="">Web Dev</a></dd>
<dd><a href="">Web Design</a></dd>
<dd><a href="">Books</a></dd>
<dd class="last"><a href="">Contact Us</a></dd>
</dl>
</li>
<li>
<dl>
<dt class="yellow"><a href="">Artech Store</a></dt>
<dd><a href="">Books</a></dd>
<dd><a href="">DVDS</a></dd>
<dd><a href="">Movies</a></dd>
<dd class="last"><a href="">Services</a></dd>
</dl>
</li>
<li>
<dl>
<dt class="green"><a href="">Artech Achi</a></dt>
<dd><a href="">Landscapes</a></dd>
<dd><a href="">Plan</a></dd>
<dd><a href="">Design</a></dd>
<dd class="last"><a href="">Maps</a></dd>
</dl>
</li>
<li>
<dl>
<dt class="blue"><a href="">Aretech Science</a></dt>
<dd><a href="">Physics</a></dd>
<dd><a href="">Maths</a></dd>
<dd><a href="">Chemistry</a></dd>
<dd class="last"><a href="">Courses</a></dd>
</dl>
</li>
</ul>
</body>
</html>
标签：
原文地址：http://www.cnblogs.com/yesiam/p/5878178.html
