纯CSS打造带注释的下拉菜单

最新推荐文章于 2025-07-26 15:11:16 发布

转载最新推荐文章于 2025-07-26 15:11:16 发布 · 97 阅读

0 ·

CC 4.0 BY-SA版权

原文链接：http://www.cnblogs.com/webdm/archive/2011/06/07/2074213.html

本文介绍了一种使用纯CSS实现的带注释下拉菜单效果。该代码适用于初学者学习，通过详细的注释帮助理解各个部分的功能。下拉菜单包含多个选项，并在鼠标悬停时显示二级菜单。

代码简介：非常适合新手学习，作者有详细的代码注释。

代码内容：

<!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>
		<title>纯CSS打造带注释的下拉菜单_网页代码站(www.webdm.cn)</title>
<style type="text/css">
<!-- /* */
* {font-family:"宋体";margin:0;padding:0;}
body {padding:15px;}

/* 设置table宽度、边框为0、(IE6) */
.nav ul table {width:100%;border-collapse:collapse;border:0;}
/* 默认隐藏下一级ul列表 */
.nav ul li ul {display:none;}
/* 当鼠标经过时显示下一级ul列表 */
.nav ul li:hover ul,
.nav ul li a:hover ul {display:block;width:100%;}
/* 好久没玩...结果不知道哪出错了，不加粗就是不行。哪位有深入研究滴请详解~谢 */
.nav li a:hover {font-weight:bold;}

/* ====================== 以上为关键属性 ====================== */


/* ====================== 以下各位随意发挥 ====================== */
/* 修饰样式一 */
.nav {float:left;_height:22px;min-height:22px;border:solid #ccc;border-width:1px 0;}
.nav li {float:left;width:120px;display:block;font-size:0;}

.nav li a {width:120px;display:block;height:22px;line-height:22px;font-size:12px;text-align:center;color:#555;text-

decoration:none;background:#f7f7f7;}

.nav li:hover a,
.nav li a:hover {border-bottom:0;background:#eee;font-weight:bold;color:red;}

.nav li:hover li a,
.nav li a:hover a {color:#555;background:#f7f7f7;font-weight:normal;border-bottom:0;}

.nav li:hover li a:hover,
.nav li a:hover a:hover {background:#fff;color:#333;}

-->
</style>  

	</head>
<body>
<div class="nav">
<ul>
<li class="up"><a href="####">首页
<!--[if IE 7]><!--></a><!--<![endif]--><table><tr><td>
<ul>
<li><a href="####">111112</a></li>
<li><a href="####">111112</a></li>
<li><a href="####">111112</a></li>
</ul>
</td></tr></table><!--[if lte IE 6]></a><![endif]-->
</li>
<li><a href="####">导航2
<!--[if IE 7]><!--></a><!--<![endif]--><table><tr><td>
<ul>
<li><a href="####">222221</a></li>
<li><a href="####">222221</a></li>
<li><a href="####">222221</a></li>
</ul>
</td></tr></table><!--[if lte IE 6]></a><![endif]-->
</li>
<li><a href="####">导航3
<!--[if IE 7]><!--></a><!--<![endif]--><table><tr><td>
<ul>
<li><a href="####">333331</a></li>
<li><a href="####">333331</a></li>
<li><a href="####">333331</a></li>
</ul>
</td></tr></table><!--[if lte IE 6]></a><![endif]-->
</li>
<li><a href="####">导航4
<!--[if IE 7]><!--></a><!--<![endif]--><table><tr><td>
<ul>
<li><a href="####">444441</a></li>
<li><a href="####">444441</a></li>
<li><a href="####">444441</a></li>
</ul>
</td></tr></table><!--[if lte IE 6]></a><![endif]-->
</li>
<li><a href="####">导航5
<!--[if IE 7]><!--></a><!--<![endif]--><table><tr><td>
<ul>
<li><a href="####">555551</a></li>
<li><a href="####">555551</a></li>
<li><a href="####">555551</a></li>
</ul>
</td></tr></table><!--[if lte IE 6]></a><![endif]-->
</li>
<li><a href="####">导航6
<!--[if IE 7]><!--></a><!--<![endif]--><table><tr><td>
<ul>
<li><a href="####">666661</a></li>
<li><a href="####">666661</a></li>
<li><a href="####">666661</a></li>
</ul>
</td></tr></table><!--[if lte IE 6]></a><![endif]-->
</li>
</ul>
</div>
</body>
</html>
<br>
<p><a href="http://www.webdm.cn">网页代码站</a> - 最专业的代码下载网站 - 致力为中国站长提供有质量的代码！</p>

代码来自：http://www.webdm.cn/webcode/0cf42fbf-9bb0-4b50-b12b-c05857bbbb12.html

转载于:https://www.cnblogs.com/webdm/archive/2011/06/07/2074213.html