您的位置：首页 > Web前端 > CSS

CSS的下拉菜单 - 漂亮

2011-08-26 13:07 302 查看
如果谷歌CSS的下拉菜单，一大把，代码都差不多，但是好看的没有几个，以下是修改过的菜单，可以直接用在项目当中.



<!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>

<meta http-equiv="Content-Type" content="text/html; charset=gb2312" />

<title>纯CSS的下拉菜单 支持IE6 IE7 Firefox</title>

<style type="text/css">

*{margin:0;padding:0;}

.menu{font-size:12;position:relative;z-index:100; font-family:"宋体"}

.menu ul{list-style:none;}

.menu li {float:left;position:relative;}

.menu ul ul {visibility:hidden;position:absolute;left:3px;top:27px;}

.menu table {position:absolute; top:0; left:0;}

.menu ul li:hover ul,

.menu ul a:hover ul{visibility:visible;}

.menu ul a{display:block;background:#FFF;padding:2px 10px;margin:3px;color:#000;text-decoration:none;}

.menu ul ul li a{display:block;border:1px solid #fff;background:#DEDEDE;padding:2px 10px;margin:3px;color:#000;text-decoration:none;}

.menu a:hover{background:#fff;color:#000;border:1px solid #fff;}

.menu ul ul{}

.menu ul ul li {clear:both;text-align:left;font-size:9;}

.menu ul ul li a{display:block;width:100px;height:15px;margin:0;border:0;border-bottom:1px solid #fff;}

.menu ul ul li a:hover{border:0;background:#fff;border-bottom:1px solid #fff;}

</style>

</head>

<body>

<IMG src="#" />

<div class="menu">

<ul>

<li><a href="#">首页</a></li>

<li><hr size=15 width="1" color="#999999"></li>

<li><a href="#">关于我们

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

<!--[if lte IE 6]><table><tr><td><![endif]-->

<ul>

<li><a href="#">公司简介</a></li>

<li><a href="#">业务范围</a></li>

<li><a href="#">企业文化</a></li>

<li><a href="#">招聘信息</a></li>

<li><a href="#">联系方式</a></li>

</ul>

<!--[if lte IE 6]></td></tr></table></a><![endif]-->

</li>

<li><hr size=15 width="1" color="#999999"></li>

<li><a href="#">新闻中心

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

<!--[if lte IE 6]><table><tr><td><![endif]-->

<ul>

<li><a href="#">公司动态</a></li>

<li><a href="#">行业新闻</a></li>

</ul>

<!--[if lte IE 6]></td></tr></table></a><![endif]-->

</li>

<li><hr size=15 width="1" color="#999999"></li>

<li><a href="#">软件产品

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

<!--[if lte IE 6]><table><tr><td><![endif]-->

<ul>

<li><a href="#">解决方案</a></li>

<li><a href="#">产品介绍</a></li>

</ul>

<!--[if lte IE 6]></td></tr></table></a><![endif]-->

</li>

<li><hr size=15 width="1" color="#999999"></li>

<li><a href="#">法规标准

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

<!--[if lte IE 6]><table><tr><td><![endif]-->

<ul>

<li><a href="#">法律法规</a></li>

<li><a href="#">国家标准</a></li>

<li><a href="#">行业标准</a></li>

<li><a href="#">其他标准</a></li>

</ul>

<!--[if lte IE 6]></td></tr></table></a><![endif]-->

</li>

<li><hr size=15 width="1" color="#999999"></li>

<li><a href="#">事故案例</a></li>

<li><hr size=15 width="1" color="#999999"></li>

<li><a href="#">危险点

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

<!--[if lte IE 6]><table><tr><td><![endif]-->

<ul>

<li><a href="#">运行危险点</a></li>

<li><a href="#"> 检修危险点</a></li>

</ul>

<!--[if lte IE 6]></td></tr></table></a><![endif]-->

</li>

<li><hr size=15 width="1" color="#999999"></li>

<li><a href="#">网站留言</a></li>

</ul>

</div>

</body>

</html>
内容来自用户分享和网络整理，不保证内容的准确性，如有侵权内容，可联系管理员处理 点击这里给我发消息
标签： 
相关文章推荐
新的分享
章节导航