当前位置：移动技术网 > IT编程>网页制作>CSS > css写菜单：简洁注释版

css写菜单：简洁注释版

2017年12月12日 | 移动技术网IT编程 | 我要评论

窒息恋,720.ccav.ru,www.4399.con

这里是简洁版，主要把 [ 显示/隐藏 ] 效果给剥离出来给大家研究。
主要是利用了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菜单,窒息恋,720.ccav.ru,www.4399.con</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需刷新才能执行]

您可能感兴趣的文章:

如对本文有疑问，请在下面进行留言讨论，广大热心网友会与你互动！！点击进行留言回复

CSS3实现缺角矩形，折角矩形以及缺角边框

这篇文章主要介绍了CSS3实现缺角矩形，折角矩形以及缺角边框，文中通过示例代码介绍的非常详细，对大家的学习或者工作具有一定的参考学习价值，需要的朋友们下面随着小... [阅读全文]
详解CSS3新增的背景属性

CSS3新增属性：background-clip ，background-origin ， background-size，本文给大家分享CSS3新增的背景属性... [阅读全文]
css3 flex布局 justify-content:space-between 最后一行左对齐

这篇文章主要介绍了css3 flex布局 justify-content:space-between 最后一行左对齐,文中通过示例代码介绍的非常详细，对大家的学... [阅读全文]
详解如何使用CSS3中的结构伪类选择器和伪元素选择器

这篇文章主要介绍了详解如何使用CSS3中的结构伪类选择器和伪元素选择器，文中通过示例代码介绍的非常详细，对大家的学习或者工作具有一定的参考学习价值，需要的朋友们... [阅读全文]
CSS3 旋转立方体问题详解

这篇文章主要介绍了CSS3 旋转立方体问题详解，文中通过示例代码介绍的非常详细，对大家的学习或者工作具有一定的参考学习价值，需要的朋友们下面随着小编来一起学习学... [阅读全文]
Grid 宫格常用布局的实现

这篇文章主要介绍了Grid 宫格常用布局的实现，文中通过示例代码介绍的非常详细，对大家的学习或者工作具有一定的参考学习价值，需要的朋友们下面随着小编来一起学习学... [阅读全文]
css3一个简易的 LED 数字时钟实现方法

这篇文章主要介绍了css3一个简易的 LED 数字时钟实现方法，文中通过示例代码介绍的非常详细，对大家的学习或者工作具有一定的参考学习价值，需要的朋友们下面随着... [阅读全文]
2分钟教你实现环形/扇形菜单(基础版)

这篇文章主要介绍了2分钟教你实现环形/扇形菜单(基础版)，文中通过示例代码介绍的非常详细，对大家的学习或者工作具有一定的参考学习价值，需要的朋友们下面随着小编来... [阅读全文]
CSS3实现网站商品展示效果图

这篇文章主要介绍了CSS3实现网站商品展示效果图，文中通过示例代码介绍的非常详细，对大家的学习或者工作具有一定的参考学习价值，需要的朋友们下面随着小编来一起学习... [阅读全文]
如何用border-image实现文字气泡边框的示例代码

这篇文章主要介绍了如何用border-image实现文字气泡边框的示例代码，文中通过示例代码介绍的非常详细，对大家的学习或者工作具有一定的参考学习价值，需要的朋... [阅读全文]

网友评论


验证码：

css写菜单：简洁注释版

2017年12月12日 | 移动技术网IT编程 | 我要评论

您可能感兴趣的文章:

相关文章:

网友评论