css写菜单：简洁注释版

ttx9n · 发表于 2006-12-11 00:00:00

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

这一段注释代表：只有IE6以及IE6以下版本的浏览器才能读取到 </a>
而在IE6以及IE6以下版本的浏览器中读取到的html就是：
程序代码
<li><a href="#">导航
     <ul><li>二级导航</li></ul>
     </a>
</li>
有些朋友可能要问：为什么要搞的那么复杂，而不都用链接来包含二级列表呢，那样就只用写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"> 
<!-- /* 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 {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>

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

qzdhcgs · 发表于 2022-8-8 23:58:01

刷刷刷刷刷刷刷刷刷刷刷刷刷刷刷

uj9lpc · 发表于 2022-12-17 14:56:06

终于找到了，我擦

i1efp6c · 发表于 2023-1-11 09:35:28

看看看咋么

jasonlong · 发表于 2023-4-13 22:15:12

刷屏刷屏刷屏

e8hwl6prw · 发表于 2023-9-2 02:29:59

数据库了多久撒快乐的健身卡啦

nwk53kbd · 发表于 2023-9-16 11:19:28

数据库了多久撒快乐的健身卡啦

u7yxn9 · 发表于 2023-10-20 15:39:37

需要很久了终于找到了

平平安安 · 发表于 2023-11-29 18:28:29

谢谢小Y分享

adm1n · 发表于 2024-3-25 01:44:51

看到这帖子真是高兴！

账号		自动登录	找回密码
密码			立即注册

[CSS/HTML] css写菜单：简洁注释版

相关帖子