您的位置：首页 > Web前端 > CSS

【新手入门教程】简洁纯CSS下拉导航菜单代码

2011-03-21 10:26 513 查看

代码简介：

一款比较简洁的CSS菜单导航，带有注释，若搞不懂这种菜单的话，相信你通过本款代码的一步步分解肯定就会明白了，虽说样式不怎么美观，但实质内容已经有了，美化要看你的色感了。

代码内容：

<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Strict//EN"
"http://www.w3.org/TR/xhtml1/DTD/xhtml1-strict.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="http://www.webdm.cn">网页代码站
<!--[if IE 7]><!--></a><!--<![endif]--><table><tr><td>
<ul>
<li><a href="http://www.webdm.cn">ASP</a></li>
<li><a href="http://www.webdm.cn">ASP</a></li>
<li><a href="http://www.webdm.cn">ASP</a></li>
</ul>
</td></tr></table><!--[if lte IE 6]></a><![endif]-->
</li>
<li><a href="####">ASP源码
<!--[if IE 7]><!--></a><!--<![endif]--><table><tr><td>
<ul>
<li><a href="http://www.webdm.cn">ASP</a></li>
<li><a href="http://www.webdm.cn">ASP</a></li>
<li><a href="http://www.webdm.cn">ASP</a></li>
</ul>
</td></tr></table><!--[if lte IE 6]></a><![endif]-->
</li>
<li><a href="/">PHP源码
<!--[if IE 7]><!--></a><!--<![endif]--><table><tr><td>
<ul>
<li><a href="http://www.webdm.cn">PHP</a></li>
<li><a href="http://www.webdm.cn">PHP</a></li>
<li><a href="http://www.webdm.cn">PHP</a></li>
</ul>
</td></tr></table><!--[if lte IE 6]></a><![endif]-->
</li>
<li><a href="####">ASP.NET
<!--[if IE 7]><!--></a><!--<![endif]--><table><tr><td>
<ul>
<li><a href="http://www.webdm.cn">PHP</a></li>
<li><a href="http://www.webdm.cn">PHP</a></li>
<li><a href="http://www.webdm.cn">PHP</a></li>
</ul>
</td></tr></table><!--[if lte IE 6]></a><![endif]-->
</li>
<li><a href="####">Ajax
<!--[if IE 7]><!--></a><!--<![endif]--><table><tr><td>
<ul>
<li><a href="/">ajax</a></li>
<li><a href="/">ajax</a></li>
<li><a href="/">ajax</a></li>
</ul>
</td></tr></table><!--[if lte IE 6]></a><![endif]-->
</li>
<li><a href="####">jQuery
<!--[if IE 7]><!--></a><!--<![endif]--><table><tr><td>
<ul>
<li><a href="/">jQuery</a></li>
<li><a href="/">jQuery</a></li>
<li><a href="/">jQuery</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/d05065ee-f88a-423c-97f3-1bc078ca55e8.html

内容来自用户分享和网络整理，不保证内容的准确性，如有侵权内容，可联系管理员处理

标签：

相关文章推荐

新的分享

章节导航