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

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

运行效果截图如下：

具体代码如下：

复制代码 代码如下: !DOCTYPE html PUBLIC -//W3C//DTD XHTML 1.0 Transitional//EN
/TR/xhtml1/DTD/xhtml1-transitional.dtd
html xmlns=/1999/xhtml

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

div class=nav

a href=#首页
!--[if IE 7]!--/a!--![endif]--table cellpadding=0 cellspacing=0

a href=#最新更新
a href=#下载排行

/table!--[if lte IE 6]/a![endif]--

a href=#ASP
!--[if IE 7]!--/a!--![endif]--table cellpadding=0 cellspacing=0

a href=#企业整站
a href=#图片相册
a href=#社区程序

/table!--[if lte IE 6]/a![endif]--

a href=#PHP
!--[if IE 7]!--/a!--![endif]--table cellpadding=0 cellspacing=0

a href=#博客微博
a href=#论坛社区

/table!--[if lte IE 6]/a![endif]--

a href=#JSP
!--[if IE 7]!--/a!--![endif]--table cellpadding=0 cellspacing=0

a href=#企业
a href=#新闻系统
a href=#留言

/table!--[if lte IE 6]/a![endif]--

a href=#VC++
!--[if IE 7]!--/a!--![endif]--table cellpadding=0 cellspacing=0

a href=#数据库
a href=#界面
a href=#加密

/table!--[if lte IE 6]/a![endif]--

a href=#DELPHI
!--[if IE 7]!--/a!--![endif]--table cellpadding=0 cellspacing=0

a href=#系统相关
a href=#算法
a href=#数据库

/table!--[if lte IE 6]/a![endif]--



/body
/html

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

【纯CSS实现超简单的二级下拉导航菜单代码】相关文章：

★ 使用CSS3配合IE滤镜实现渐变和投影的效果

★ 纯CSS实现多级半透明效果菜单代码

★ CSS实现自适应宽度的菜单按钮效果代码

★ div+css实现软件公司网站蓝色导航菜单代码

★ 尼康D5200传感器是什么

★ 室内装修设计的五大主流风格

★ 尼康J2有什么功能

★ 微信电脑版怎么用

★ 电脑版微信摇一摇怎么用和怎么查看附近好友

★ 索尼HX300有GPS功能吗