兼容所有浏览器的纯CSS简单下拉菜单

2012-02-13 郑州网站建设  
<!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简单下拉菜单</title>
<style type="text/css">
<!--
 
ul {
margin: 0px;
padding: 0px;
list-style-type: none;
float: left;
 
}
ul li {
float: left;background-image: url(images/bg.jpg);
}
ul li a {
letter-spacing: 1px;
text-align: center;
display: block;
height: 41px;
width: 80px;
color: #fff;
text-decoration: none;
overflow: hidden;
line-height:41px;
}
ul li a:hover {
color: #f00;
overflow: hidden;
line-height:41px;
height: 41px;
width: 80px;
}
 
ul li{position:relative;}
ul li ul{display:none;margin:0;padding:0;position:absolute;top:40px;background-color:#C5D5EE;width:85px;}
ul li ul li{width:80px;float:none;}
ul li ul li a,ul li ul li a:hover{width:80px;margin-left:0;text-align:left;border-top:1px solid #ccc;padding-
 
left:5px;color:#007DCD;height:25px;line-height:25px;}
ul li:hover ul, li.over ul{display:block;}
 
-->
</style>
</head>
<body>
<ul id="nav_top">
    <li><a href="#">首页</a>
    <li><a href="#">关于我们</a>
      <ul>
        <li><a href="#">公司介绍</a></li>
        <li><a href="#">组织构架</a></li>
        <li><a href="#">董事致辞</a></li>
      </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>
    </li>
</ul>
</body>
</html>
 

河南郑州做网站首选天择文化,我们专注郑州网站建设网站设计网站制作与开发,是中原地区专业的郑州网络公司,多年来我们一直努力,服务客户数百家,欢迎您的咨询。
本文链接:郑州网络公司http://www.tzchb.com/tech/523.html转载请标明出处,谢谢合作!
标签:
  • 代码
  • css
  • 浏览器
  • 兼容
  • 菜单