代码简介:非常适合新手学习,作者有详细的代码注释。
代码内容:
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd"> <html xmlns="http://www.w3.org/1999/xhtml"> <head> <title>纯CSS打造带注释的下拉菜单_网页代码站(www.webdm.cn)</title> <style type="text/css"> <!-- /* */ * {font-family:"宋体";margin:0;padding:0;} body {padding:15px;} /* 设置table宽度、边框为0、(IE6) */ .nav ul table {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;100%;} /* 好久没玩...结果不知道哪出错了,不加粗就是不行。哪位有深入研究滴请详解~谢 */ .nav li a:hover {font-weight:bold;} /* ====================== 以上为关键属性 ====================== */ /* ====================== 以下各位随意发挥 ====================== */ /* 修饰样式一 */ .nav {float:left;_height:22px;min-height:22px;border:solid #ccc;border-1px 0;} .nav li {float:left;120px;display:block;font-size:0;} .nav li a {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> <br> <p><a href="http://www.webdm.cn">网页代码站</a> - 最专业的代码下载网站 - 致力为中国站长提供有质量的代码!</p>
代码来自:http://www.webdm.cn/webcode/0cf42fbf-9bb0-4b50-b12b-c05857bbbb12.html