欢迎来到福编程网，本站提供各种互联网专业知识！

手机版

微信关注

快捷导航: 正则表达式 AJAX相关黑客相关相关技巧 Mysql MsSql MsSql2005 MsSql2008 MariaDB Oracle Access SQLite PostgreSQL MongoDB DB2 Redis 数据库文摘数据库其它 LINUX RedHat/Centos Ubuntu/Debian Fedora Solaris 红旗Linux Unix/BSD 苹果MAC 麒麟系统注册表 BIOS 系统安装系统进程 Fireworks教程

广告商业广告，理性选择

您的位置：网站首页 > 网络编程 > CSS/HTML > 经验交流

css写菜单：简洁注释版

发布时间：2006-12-11　作者：　来源：转载

标签：雪佛兰通用奢华劳斯莱斯旗舰版 64位收藏夹解调器

这里是简洁版，主要把[显示/隐藏]效果给剥离出来给大家研究。主要是利用了a:hover[ie]，li:hover[非ie]的状态来做出显示/隐藏菜单的效果。关键之处：程序代码这一段注释表示：只有非IE浏览器和IE7才能读取到这样在非IE浏览器及IE7版本的浏览器中读取到的html

这里是简洁版，主要把[显示/隐藏]效果给剥离出来给大家研究。
主要是利用了a:hover[ie]，li:hover[非ie]的状态来做出显示/隐藏菜单的效果。
关键之处：
程序代码

这一段注释表示：只有非IE浏览器和IE7才能读取到
这样在非IE浏览器及IE7版本的浏览器中读取到的html是：
程序代码

导航

二级导航

程序代码

这一段注释代表：只有IE6以及IE6以下版本的浏览器才能读取到
而在IE6以及IE6以下版本的浏览器中读取到的html就是：
程序代码

导航

二级导航

有些朋友可能要问：为什么要搞的那么复杂，而不都用链接来包含二级列表呢，那样就只用写a:hover就可以了，代码简单多了。
我个人觉得：
玩标准就要尽可能的去遵循语义。
在IE6以及以下版本中由于不支持a以外标记的hover伪类，所以目前来说只有这个办法能达到类似的目的，对着IE6...只好放弃语义了。
但我们可不要为了一个IE6而坏了整锅汤哦，所以有些事情虽然麻烦了点，但还是要做的~

<!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>   
<meta http-equiv="Content-Type" content="text/html; charset=GB2312" />   
<title>纯CSS菜单</title>   
<style type="text/css"> 
<!-- /* PR 50198763 */ 
* {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 {_width:720px;min-width:720px;} 
.nav li {float:left;width:120px;display:block;font-size:0;border:solid #ccc;border-width:1px 0;_border:0;}

.nav li a {width:120px;display:block;height:16px;padding:5px 0 1px;_border:solid #ccc;_border-width:1px 0;font-size:12px;text-align:center;color:#555;text-decoration:none;background:#f7f7f7;} 
.nav li:hover a, 
.nav li a:hover {font-weight:bold;color:red;} 
.nav li:hover li {border:0;} 
.nav li li a, 
.nav li:hover li a {_border:0;font-weight:normal;color:#555;} 
.nav li li a:hover {color:red;font-weight:normal;}

--> 
</style>   
</head>

[Ctrl+A 全选注:如需引入外部Js需刷新才能执行]
注意里面是分段的，[随意发挥]。俺先来发挥一下~（原先没注意兼容，现在兼容了...）
<!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> <meta http-equiv="Content-Type" content="text/html; charset=GB2312" /> <title>纯CSS菜单</title> <style type="text/css">  </style> </head> <body> 首页  111112 111112 111112  导航2  222221 222221 222221  导航3  333331 333331 333331  导航4  444441 444441 444441  导航5  555551 555551 555551  导航6  666661 666661 666661  </body> </html>

[Ctrl+A 全选注:如需引入外部Js需刷新才能执行]

上一篇：标准布局应用：显示/隐藏侧边栏 [附详细注解]

下一篇：又一个典型css实例

广告商业广告，理性选择

网站首页

网络编程

数据库

操作系统

平面设计

网站运营

网络安全

电脑相关

手机学院

css写菜单：简洁注释版

相关推荐

文章分类

热门关键词

热门文章

最新更新