本文介绍了一种使用纯CSS实现的下拉菜单效果，通过浮动、定位及显示隐藏等属性控制，展示了清晰的HTML结构与简洁的样式代码。
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8" />
<title></title>
<style type="text/css">
*{margin: 0px;padding: 0px;}
#nav {background: #eee;width: 600px;height: 40px;margin: 0 auto;
}
ul {list-style: none;}
ul li {float: left;line-height: 40px;text-align: center;position: relative;}
a {text-decoration: none;height: 40px; color: #000;display: block; padding: 0 10px;}
a:hover {color: #FFF; background-color: #666;}
ul li ul li {float: none;background-color: #eee;margin-top: 2px;}
ul li ul {position: absolute; left: 0px; top: 40px;display: none;}
ul li ul li a {width: 40px;}
ul li ul li a:hover {background-color: #06f;}
ul li:hover ul {display: block;}
</style>
</head>
<body>
<div id="nav">
<ul>
<li><a href="#">首页</a></li>
<li><a href="#">课程大厅</a>
<ul>
<li><a href="#">JavaScript</a></li>
<li><a href="#">jQuery</a></li>
</ul>
</li>
<li><a href="#">学习中心</a>
<ul>
<li><a href="#">JavaScript</a></li>
<li><a href="#">jQuery</a></li>
</ul>
</li>
<li><a href="#">经典案例</a></li>
<li><a href="#">关于我们</a></li>
</ul>
</div>
</body>
</html>
扫一扫
被折叠的 条评论
为什么被折叠?
到【灌水乐园】发言
