版权声明
·
网站留言
·
联系我们
·
加入收藏
热门关键词：
焦点图
png图标
背景
按钮
首页
PNG图标
广告代码
网页模板
字体下载
JS代码
CSS样式
技术文档
网站常用
gif图片
JPG图片
JavaScript用户手册
flash动画
jsp编程
.net编程
网站配色
网站优化
Oracle教程
JS技术
数据库编程
网络维护
html基础
安全相关
测试相关
知识扩展
CSS技术
DIV+CSS实例
DIV+CSS教程
鼠标特效
网站常用
文字特效
时间日期
图片特效
表格图层
导航菜单
网页特效
详细内容
首页
>>
JS
>>
导航菜单
>> 正文
[
关闭窗口
]
纯css写菜单：简洁注释版 [2]
发布日期：2010-03-16
点击：3048
<!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菜单--站点基地[zdbase.com]</title> <style type="text/css"> <!-- /* */ * {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 {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="http://www.zdbase.com/">首页 <!--[if IE 7]><!--></a><!--<![endif]--><table><tr><td> <ul> <li><a href="http://www.zdbase.com/">111112</a></li> <li><a href="http://www.zdbase.com/">111112</a></li> <li><a href="http://www.zdbase.com/">111112</a></li> </ul> </td></tr></table><!--[if lte IE 6]></a><![endif]--> </li> <li><a href="http://www.zdbase.com/">导航2 <!--[if IE 7]><!--></a><!--<![endif]--><table><tr><td> <ul> <li><a href="http://www.zdbase.com/">222221</a></li> <li><a href="http://www.zdbase.com/">222221</a></li> <li><a href="http://www.zdbase.com/">222221</a></li> </ul> </td></tr></table><!--[if lte IE 6]></a><![endif]--> </li> <li><a href="http://www.zdbase.com/">导航3 <!--[if IE 7]><!--></a><!--<![endif]--><table><tr><td> <ul> <li><a href="http://www.zdbase.com/">333331</a></li> <li><a href="http://www.zdbase.com/">333331</a></li> <li><a href="http://www.zdbase.com/">333331</a></li> </ul> </td></tr></table><!--[if lte IE 6]></a><![endif]--> </li> <li><a href="http://www.zdbase.com/">导航4 <!--[if IE 7]><!--></a><!--<![endif]--><table><tr><td> <ul> <li><a href="http://www.zdbase.com/">444441</a></li> <li><a href="http://www.zdbase.com/">444441</a></li> <li><a href="http://www.zdbase.com/">444441</a></li> </ul> </td></tr></table><!--[if lte IE 6]></a><![endif]--> </li> <li><a href="http://www.zdbase.com/">导航5 <!--[if IE 7]><!--></a><!--<![endif]--><table><tr><td> <ul> <li><a href="http://www.zdbase.com/">555551</a></li> <li><a href="http://www.zdbase.com/">555551</a></li> <li><a href="http://www.zdbase.com/">555551</a></li> </ul> </td></tr></table><!--[if lte IE 6]></a><![endif]--> </li> <li><a href="http://www.zdbase.com/">导航6 <!--[if IE 7]><!--></a><!--<![endif]--><table><tr><td> <ul> <li><a href="http://www.zdbase.com/">666661</a></li> <li><a href="http://www.zdbase.com/">666661</a></li> <li><a href="http://www.zdbase.com/">666661</a></li> </ul> </td></tr></table><!--[if lte IE 6]></a><![endif]--> </li> </ul> </div><p>查找更多代码，请访问：<a href="http://www.zdbase.com" target="_blank">站点基地</a></p> </body> </html>
提示：您可以先修改部分代码再运行，复制代码和保存代码功能在Firefox下无效。
相关文章
关于我们
-
版权声明
-
联系我们
-
网站留言
-
网站地图
Copyright © 2010 zdbase.com All Rights Reserved.
苏ICP备15039389号
可人软件设计