<!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">
* {
margin:0;
padding:0;
}
#nav {
width:680px;
height:38px;
background-color:#00CC99;
font-size:12px;
margin:0 auto;
margin-top:100px;
}
#clear {
clear:both;
}
ul {
list-style:none;
}
#nav li {
float:left;
}
#nav li:hover dl {
display:block;
}
#nav li a {
background-color: #000;
color: #FFF;
padding:12px 20px;
display:block;
text-decoration:none;
}
#nav li a:hover {
background-color: #f60;
}
#nav li dl {
display:none;
}
#nav li dl dd a {
background-color:#666;
color: #FFF;
}
#nav li dl dd a:hover {
background-color: #fc9;
color:#f00;
}
#nav li:hover dl {
display:block;
}
</style>
</head>
<body>
<div ></div>
</div>
</body>
</html>
相关文章：
- 鼠标划过快速展开的JS下拉菜单 2021-11-01
- Juery鼠标放上去、移开 2021-07-25
- jQuery鼠标悬停3d菜单展开动画 2021-05-22
- jquery实现文字自动向上滚动,鼠标放上去停止,移开继续滚动代码... 2022-12-23
- 经典的 div + css 鼠标 hover 下拉菜单 2021-06-23
- 隐藏于网页左侧，鼠标单击展开的CSS菜单代码 2022-12-23
- CSS3鼠标放上去旋转代码 2021-09-17
- Css实现的鼠标滑动选项卡菜单代码 2022-12-23