簡潔的隱藏垂直菜單在hover時將內容展開。這樣的效果在JS裡有很多個版本，但這個可以說是絕無僅有的CSS版本。此菜單可以在IE5.5,IE6,IE7,FF,Opera,NS8以及MacFF1.5和Safari裡正常顯示，雖然Mac IE5.X裡可能會有些問題。
以下是引用片段：
/* 共用樣式 */
.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;
}
以下是引用片段：
<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>