用CSS制作兼容多浏览量器的隐藏菜单

简洁的隐藏垂直菜单在hover时将内容展开。这样的效果在JS里有很多个版本，但这个可以说是绝无仅有的CSS版本。此菜单可以在IE5.5,IE6,IE7,FF,Opera,NS8以及MacFF1.5和Safari里正常显示，虽然Mac IE5.X里可能会有些问题。

CSS 代码

/* 共用样式 */  
.menu {  
font-family: verdana, sans-serif;   
position:relative;   
font-family: tahoma, geneva, "lucida sans unicode", "lucida grande",verdana, sans-serif;  
margin-bottom:220px;  
}  
.menu ul {  
padding:0;   
margin:0;  
list-style-type: none;  
}  
.menu ul li {  
position:relative;  
float:left;  
}  
.menu ul li a, .menu ul li a:visited {  
display:block;   
text-decoration:none;   
width:25px;  
height:100px;  
font-weight:bold;  
background:transparent url(https://www.aspxhome.com/images/logo.gif) top right no-repeat;   
text-indent:-999px;  
}  
.menu ul li ul {  
visibility:hidden;  
position:absolute;  
width:190px;  
top:0;   
left:0;  
border:1px solid #444;  
}  
table {  
margin:0; padding:0; border:0;   
border-collapse:collapse;  
font-size:1em;  
}  
/* 非IE浏览器专用 */  
.menu ul li:hover a {  
color:#fff;  
width:215px;  
}  
.menu ul li:hover ul {  
visibility:visible;  
}  
.menu ul li:hover ul li a {  
display:block;   
background:#eee;  
border:0;  
margin:0;  
text-indent:0;  
color:#333;  
font-weight:normal;   
font-size:0.9em;  
height:auto;   
line-height:1em;   
padding:5px;   
width:180px;  
text-align:left;  
}  
.menu ul li:hover ul li a:hover {  
background:#888;   
color:#fff;  
}  
如果是要支持IE6则要加上:  
.menu ul li a:hover {  
width:215px;  
}  
.menu ul li a:hover ul {  
visibility:visible;  
}  
.menu ul li a:hover ul li a {  
display:block;   
background:#eee;  
border:0;  
margin:0;  
text-indent:0;  
color:#333;  
font-weight:normal;   
font-size:0.9em;  
height:auto;   
line-height:1em;   
padding:5px;   
width:190px;  
w\idth:180px;  
text-align:left;  
}  
.menu ul li a:hover ul li a:hover {  
background:#888;   
color:#fff;  
}

HTML代码:

<div class="menu">  
<ul>  
  <li><a class="drop" href="../menu/index.html">MENU  
  <!--[if IE 7]><!-->  
  </a>  
  <!--<![endif]-->  
<table><tr><td>  
 <ul>  
  <li><a href="../menu/zero_dollars.html" title="The zero dollar ads page">zero dollars advertising page</a></li>  
  <li><a href="../menu/embed.html" title="Wrapping text around images">wrapping text around images</a></li>  
 <li><a href="../menu/form.html" title="Styling forms">styled form</a></li>  
  <li><a href="../menu/nodots.html" title="Removing active/focus borders">active focus</a></li>  
  <li><a href="../menu/shadow_boxing.html" title="Multi-position drop shadow">shadow boxing</a></li>  
  <li><a href="../menu/old_master.html" title="Image Map for detailed information">image map for detailed information</a></li>  
  <li><a href="../menu/bodies.html" title="fun with background images">fun with background images</a></li>  
  <li><a href="../menu/fade_scroll.html" title="fade-out scrolling">fade scrolling</a></li>  
 <li><a href="../menu/em_images.html" title="em size images compared">em image sizes compared</a></li>  
  </ul>  
</td></tr></table>  
<!--[if lte IE 6]>  
  </a>  
  <![endif]-->  
</li>  
  </ul>  
</div>