[纯css下拉菜单]---兼容各种IE,但搜狗好像有点问题

View Code 
<!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>
<style type="text/css">
*{margin:0;padding:0;list-style:none;}
<!--
body,td,th {
 font-family: Verdana, Geneva, sans-serif;
 font-size: 100%;
 color: #666;
}
body {
 background-color: #fff;
 margin: 20px;
} 
 
a, a:hover, a:active, a:focus {
 outline:0; 
 direction:ltr;
}
 
.wrapper {
 position:relative;height:25px;
}
 
.mainmenu {
 position:absolute; left:30%;
 z-index:100;
 font-family:Verdana, Geneva, sans-serif;
 font-weight:normal;
 font-size:90%;
 line-height:25px;
} 
 
ul.menu {
 width:100px; 
 overflow:hidden; 
 float:left; 
 margin-right:1px;
} 
 
ul.menu a {
 text-decoration:none; 
 color:#fff; 
 padding-left:5px;
}
 
ul.menu li.list {
float:left;
width:250px;
margin:-32767px -125px 0px 0px;
background:red;
}
 
ul.menu li.list a.category {
position:relative;
z-index:50;
display:block;
float:left;
width:120px;
margin-top:32767px;
background:transparent;
}
 
ul.menu li.list a.category:hover,
ul.menu li.list a.category:focus,
ul.menu li.list a.category:active {
 margin-right:1px;
 background:green;
}
 
ul.submenu {
 float:left; 
 padding:25px 0px 0px 0px;  
 background:green;
 background-repeat:no-repeat;
 background-position:left top;
 margin:-25px 0px 0px 0px;
}
 
ul.submenu li a {
float:left;
width:120px;
background:#369;
clear:left;
}
 
ul.submenu a:hover,
ul.submenu a:focus,
ul.submenu a:active {
background:#900;
margin-right:1px;
}
-->
 
 
</style>
</head>
 <body>
<div class="wrapper">
<div class="mainmenu">
<ul class="menu">
<li class="list">
 <a class="category" href="#Home">Home</a>
</li>
</ul>
<ul class="menu">
<li class="list">
 <a class="category" href="#about">About Us&nbsp;&nbsp;&raquo;</a>
 <ul class="submenu">
  <li><a href="#about1">About link 1</a></li>
  <li><a href="#about2">About link 2</a></li>
  <li><a href="#about3">About link 3</a></li>
  <li><a href="#about4">About link 4</a></li>
 </ul>
</li>
</ul>
<ul class="menu">
<li class="list">
 <a class="category" href="#articles">Articles&nbsp;&nbsp;&raquo;</a>
 <ul class="submenu">
  <li><a href="#articles1">Articles link 1</a></li>
  <li><a href="#articles2">Articles link 2</a></li>
  <li><a href="#articles3">Articles link 3</a></li>
 </ul>
</li>
</ul>
<ul class="menu">
<li class="list">
 <a class="category" href="#news">News&nbsp;&nbsp;&raquo;</a>
 <ul class="submenu">
  <li><a href="#news1">News link 1</a></li>
  <li><a href="#news2">News link 2</a></li>
 </ul>
</li>
</ul>
<ul class="menu">
<li class="list">
 <a class="category" href="#donate">Donate</a>
</li>
</ul>
<ul class="menu">
<li class="list">
 <a class="category" href="#contact">Contact</a>
</li>
</ul>
<!-- end mainmenu --></div>
<!-- end wrapper --></div>
</body>


效果:

 

 

posted on 2012-09-18 18:37  unifyyeteng  阅读(197)  评论(0)  编辑  收藏  举报

导航