简洁的隐藏垂直菜单在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(../../updata/tab.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; 
}

生效的XHTML代码

以下是引用片段：
<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>

.

• 上一篇:几款漂亮的CSS按纽代码
• 下一篇:解决IE6浏览器不能正常解析某些CSS代码方法

TAG: CSS隐藏菜单