纯css下拉菜单...

时间：2010-08-12 来源：renxingxingge

这是一个无js，无hacks的纯CSS下拉菜单，支持IE6。 ]t0-N.73R:B21vjwWl

IE6+， FireFox2+， Opera 9+， Flock2+， Chrom2+ 测试通过。

HTML部分：

<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  »</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>
<li><a class="endlist" href="#about5">About link 5</a></li>
</ul>
</li>
</ul>
<ul class="menu">
<li class="list">
<a class="category" href="#articles">Articles  »</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>
<li><a class="endlist" href="#articles4">Articles link 4</a></li>
</ul>
</li>
</ul>
<ul class="menu">
<li class="list">
<a class="category" href="#news">News  »</a>
<ul class="submenu">
<li><a href="#news1">News link 1</a></li>
<li><a href="#news2">News link 2</a></li>
<li><a class="endlist" href="#news3">News link 3</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>
</div>
</div>

CSS部分：

    
        body,td,th { 
      
         font-family: Verdana, Geneva, sans-serif; 
      
         font-size: 100%; 
      
         color: #666; 
      
        } 
      
        body { 
      
         background-color: #fff; 
      
         margin-left: 20px; 
      
         margin-top: 20px; 
      
         margin-right: 20px; 
      
         margin-bottom: 20px; 
      
        }  
      
        a, a:hover, a:active, a:focus { 
      
         outline:0;  
      
         direction:ltr; 
      
        } 
      
        .wrapper { 
      
         position:relative; height:25px; 
      
        } 
      
        .mainmenu { 
      
         position:absolute;  
      
         z-index:100; 
      
         font-family:Verdana, Geneva, sans-serif; 
      
         font-weight:normal; 
      
         font-size:90%; 
      
         line-height:25px; 
      
         left:50%;  
      
         margin-left:-303px;  
      
         width:606px; 
      
        }  
      
        ul.menu { 
      
         padding:0;  
      
         margin:0;  
      
         list-style:none;  
      
         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:url(images/top1.png) no-repeat left bottom; 
      
        } 
      
        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-image:url(images/tophover1.png); 
      
         background-repeat:no-repeat; 
      
         background-position:left top; 
      
        } 
      
        ul.submenu { 
      
         float:left;  
      
         padding:25px 0px 0px 0px;  
      
         margin:0;  
      
         list-style:none;  
      
         background-image:url(images/tophover1.png); 
      
         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 li a.endlist { 
      
         background:url(images/bottom1.png); 
      
        } 
      
        ul.submenu li a.endlist:hover,ul.submenu li a.endlist:focus,ul.submenu li a.endlist:active { 
      
         background:url(images/bottomhover1.png); 
      
        } 
      
        ul.submenu a:hover,ul.submenu a:focus,ul.submenu a:active { 
      
         background:#900; 
      
         margin-right:1px; 
      
        }