当前位置：Gxlcms > css > css写菜单：简洁注释版_经验交流

css写菜单：简洁注释版_经验交流

时间：2021-07-01 10:21:17 帮助过：12人阅读

这里是简洁版，主要把 [ 显示/隐藏 ] 效果给剥离出来给大家研究。
主要是利用了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需刷新才能执行]

注意里面是分段的，[ 随意发挥 ] 。俺先来发挥一下~ （原先没注意兼容，现在兼容了...）

/* ====================== 以上为关键属性 ====================== */

/* ====================== 以下各位随意发挥 ====================== */ 
/* 修饰样式一 */ 
.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需刷新才能执行]

css写菜单：简洁注释版_经验交流

人气教程排行