纯CSS如何实现超简单的二级下拉导航菜单代码

虽然春天的劲风，着实让我不太喜欢，但不得不说，春天是个好季节，俗话说 "一年之际在于春 "，春天是一年的开始，也是让人充满希望和幻想的季节。刚刚历经了寒冬的人们，开始在春天慢慢苏醒，他们慢慢的重拾自己的梦想，渐渐骨起斗志，一步步朝着自己的梦想出发，一点点靠近理想的终端。

本文实例讲述了纯CSS实现超简单的二级下拉导航菜单代码。分享给大家供大家参考。具体如下：

这是一款纯CSS菜单，二级下拉导航效果，是最简洁的CSS导航菜单，兼容性也很棒，IE7/8、火狐等都支持，而且它还是学习CSS菜单编写的典型好代码教程，让你学会很多CSS技巧。

运行效果截图如下：

在线演示地址如下：

http://demo.haodaima.com/js/2015/css-simple-2l-show-nav-menu-codes/

具体代码如下：

复制代码

代码如下:

<!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>纯CSS菜单</title>
<style type="text/css">
* {font-family:"宋体";margin:0;padding:0;}
body {padding:15px;}
.nav li li a {display:inline-block;}
.nav li li a {display:block;}
.nav ul {list-style-type:none;margin:0;padding:0;}
.nav ul li { float:left;line-height:24px;display:block;border-bottom:dashed #ccc 1px;font-size:0;padding:0;margin:0;width:120px;}
.nav ul li a {display:block;width:120px;height:24px;font-size:12px;text-align:center;color:#555;text-decoration:none;background:#f7f7f7;}
.nav ul table {width:100%;border-collapse:collapse;border:0;padding:0;margin:0;}
.nav ul li ul {display:none;}
.nav ul li:hover,.nav ul li a:hover,.nav ul li a:active {color:red;background-color:#f1f1f1;}
.nav ul li:hover ul,.nav ul li a:hover ul,.nav ul li a:active ul {display:block;width:100%;}
.nav ul ul li {display:block;width:100%;border:none;}
.nav ul ul li a{display:block;color:blue;border:none;}
</style>
</head>
<body>
<div class="nav">
<ul>
<li><a rel="nofollow noopener noreferrer" href="#">首页
</a><table cellpadding="0" cellspacing="0"><tr><td>
<ul>
<li><a rel="nofollow noopener noreferrer" href="#">最新更新</a></li>
<li><a rel="nofollow noopener noreferrer" href="#">下载排行</a></li>
</ul>
</td></tr></table>
</li>
<li><a rel="nofollow noopener noreferrer" href="#">ASP
</a><table cellpadding="0" cellspacing="0"><tr><td>
<ul>
<li><a rel="nofollow noopener noreferrer" href="#">企业整站</a></li>
<li><a rel="nofollow noopener noreferrer" href="#">图片相册</a></li>
<li><a rel="nofollow noopener noreferrer" href="#">社区程序</a></li>
</ul>
</td></tr></table>
</li>
<li><a rel="nofollow noopener noreferrer" href="#">PHP
</a><table cellpadding="0" cellspacing="0"><tr><td>
<ul>
<li><a rel="nofollow noopener noreferrer" href="#">博客微博</a></li>
<li><a rel="nofollow noopener noreferrer" href="#">论坛社区</a></li>
</ul>
</td></tr></table>
</li>
<li><a rel="nofollow noopener noreferrer" href="#">JSP
</a><table cellpadding="0" cellspacing="0"><tr><td>
<ul>
<li><a rel="nofollow noopener noreferrer" href="#">企业</a></li>
<li><a rel="nofollow noopener noreferrer" href="#">新闻系统</a></li>
<li><a rel="nofollow noopener noreferrer" href="#">留言</a></li>
</ul>
</td></tr></table>
</li>
<li><a rel="nofollow noopener noreferrer" href="#">VC++
</a><table cellpadding="0" cellspacing="0"><tr><td>
<ul>
<li><a rel="nofollow noopener noreferrer" href="#">数据库</a></li>
<li><a rel="nofollow noopener noreferrer" href="#">界面</a></li>
<li><a rel="nofollow noopener noreferrer" href="#">加密</a></li>
</ul>
</td></tr></table>
</li>
<li><a rel="nofollow noopener noreferrer" href="#">DELPHI
</a><table cellpadding="0" cellspacing="0"><tr><td>
<ul>
<li><a rel="nofollow noopener noreferrer" href="#">系统相关</a></li>
<li><a rel="nofollow noopener noreferrer" href="#">算法</a></li>
<li><a rel="nofollow noopener noreferrer" href="#">数据库</a></li>
</ul>
</td></tr></table>
</li>
</ul>
</div>
</body>
</html>

希望本文所述对大家的css网页设计有所帮助。

本文纯CSS如何实现超简单的二级下拉导航菜单代码到此结束。离开，别无选择。如同必须的一些放下。卸下负重，却还有不得不承受之伤。一如从前面带微笑，不变的却是内心不得不掩饰的疼痛。红尘依然是红尘，自我依然还是自我。忘记了忧愁，也就没有了忧愁，能够舒展紧皱的眉。忘记了憎恨，也就远离了憎恨。小编再次感谢大家对我们的支持！小编再次感谢大家对我们的支持！

全站频道

大家都在搜索：