css写菜单：简洁注释版

这里是简洁版，主要把 [ 显示/隐藏 ] 效果给剥离出来给大家研究。

主要是利用了a:hover[ie]，li:hover[非ie]的状态来做出显示/隐藏菜单的效果。

关键之处：

程序代码

<!–[if IE 7]><!–></a><!–<![endif]–>

这一段注释表示：只有非IE浏览器和IE7才能读取到 </a>

这样在非IE浏览器及IE7版本的浏览器中读取到的html是：

程序代码

<li><a href=”#”>导航</a>

     <ul><li>二级导航</li></ul>

</li>

程序代码

<!–[if lte IE 6]></a><![endif]–>

这一段注释代表：只有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> <body> <div class=”nav”> <ul> <li class=”up”><a href=”####”>首页 <!–[if IE 7]><!–></a><!–<![endif]–><table><tr><td> <ul> <li><a href=”####”>111112</a></li> <li><a href=”####”>111112</a></li> <li><a href=”####”>111112</a></li> </ul> </td></tr></table><!–[if lte IE 6]></a><![endif]–> </li> <li><a href=”####”>导航2 <!–[if IE 7]><!–></a><!–<![endif]–><table><tr><td> <ul> <li><a href=”####”>222221</a></li> <li><a href=”####”>222221</a></li> <li><a href=”####”>222221</a></li> </ul> </td></tr></table><!–[if lte IE 6]></a><![endif]–> </li> <li><a href=”####”>导航3 <!–[if IE 7]><!–></a><!–<![endif]–><table><tr><td> <ul> <li><a href=”####”>333331</a></li> <li><a href=”####”>333331</a></li> <li><a href=”####”>333331</a></li> </ul> </td></tr></table><!–[if lte IE 6]></a><![endif]–> </li> <li><a href=”####”>导航4 <!–[if IE 7]><!–></a><!–<![endif]–><table><tr><td> <ul> <li><a href=”####”>444441</a></li> <li><a href=”####”>444441</a></li> <li><a href=”####”>444441</a></li> </ul> </td></tr></table><!–[if lte IE 6]></a><![endif]–> </li> <li><a href=”####”>导航5 <!–[if IE 7]><!–></a><!–<![endif]–><table><tr><td> <ul> <li><a href=”####”>555551</a></li> <li><a href=”####”>555551</a></li> <li><a href=”####”>555551</a></li> </ul> </td></tr></table><!–[if lte IE 6]></a><![endif]–> </li> <li><a href=”####”>导航6 <!–[if IE 7]><!–></a><!–<![endif]–><table><tr><td> <ul> <li><a href=”####”>666661</a></li> <li><a href=”####”>666661</a></li> <li><a href=”####”>666661</a></li> </ul> </td></tr></table><!–[if lte IE 6]></a><![endif]–> </li> </ul> </div> </body> </html>

[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> <body> <div class=”nav”> <ul> <li class=”up”><a href=”####”>首页 <!–[if IE 7]><!–></a><!–<![endif]–><table><tr><td> <ul> <li><a href=”####”>111112</a></li> <li><a href=”####”>111112</a></li> <li><a href=”####”>111112</a></li> </ul> </td></tr></table><!–[if lte IE 6]></a><![endif]–> </li> <li><a href=”####”>导航2 <!–[if IE 7]><!–></a><!–<![endif]–><table><tr><td> <ul> <li><a href=”####”>222221</a></li> <li><a href=”####”>222221</a></li> <li><a href=”####”>222221</a></li> </ul> </td></tr></table><!–[if lte IE 6]></a><![endif]–> </li> <li><a href=”####”>导航3 <!–[if IE 7]><!–></a><!–<![endif]–><table><tr><td> <ul> <li><a href=”####”>333331</a></li> <li><a href=”####”>333331</a></li> <li><a href=”####”>333331</a></li> </ul> </td></tr></table><!–[if lte IE 6]></a><![endif]–> </li> <li><a href=”####”>导航4 <!–[if IE 7]><!–></a><!–<![endif]–><table><tr><td> <ul> <li><a href=”####”>444441</a></li> <li><a href=”####”>444441</a></li> <li><a href=”####”>444441</a></li> </ul> </td></tr></table><!–[if lte IE 6]></a><![endif]–> </li> <li><a href=”####”>导航5 <!–[if IE 7]><!–></a><!–<![endif]–><table><tr><td> <ul> <li><a href=”####”>555551</a></li> <li><a href=”####”>555551</a></li> <li><a href=”####”>555551</a></li> </ul> </td></tr></table><!–[if lte IE 6]></a><![endif]–> </li> <li><a href=”####”>导航6 <!–[if IE 7]><!–></a><!–<![endif]–><table><tr><td> <ul> <li><a href=”####”>666661</a></li> <li><a href=”####”>666661</a></li> <li><a href=”####”>666661</a></li> </ul> </td></tr></table><!–[if lte IE 6]></a><![endif]–> </li> </ul> </div> </body> </html>

[Ctrl+A 全选注:引入外部Js需再刷新一下页面才能执行]

微信