当前位置：用CSS制作隐藏菜单
文章来自:互联网 | 发表时间:2007-9-20 23:09:39
简洁的隐藏垂直菜单在hover时将内容展开。这样的效果在JS里有很多个版本，但这个可以说是绝无仅有的CSS版本。此菜单可以在IE5.5, IE6,IE7,FF,Opera,NS8以及MacFF1.5和Safari里正常显示，虽然Mac IE5.X里可能会有些问题。CSS 代码
以下是引用片段：
/* 共用样式 */
.menu {#FF0000;">
font-family: verdana, sans-serif;#FF0000;">
position:relative;#FF0000;">
font-family: tahoma, geneva, ";#FF0000;">lucida sans unicode", "lucida grande",verdana, sans-serif;
margin-bottom:220px;
}
.menu ul {#FF0000;">
padding:0;#FF0000;">
margin:0;#FF0000;">
list-style-type: none;
}
.menu ul li {#FF0000;">
position:relative;#FF0000;">
float:left;
}
.menu ul li a, .menu ul li a:visited {#FF0000;">
display:block;#FF0000;">
text-decoration:none;#FF0000;">
width:25px;#FF0000;">
height:100px;#FF0000;">
font-weight:bold;#FF0000;">
background:transparent url(../../updata/tab.gif) top right no-repeat;#FF0000;">
text-indent:-999px;
}
.menu ul li ul {#FF0000;">
visibility:hidden;#FF0000;">
position:absolute;#FF0000;">
width:190px;#FF0000;">
top:0;#FF0000;">
left:0;#FF0000;">
border:1px solid #444;
}
table {#FF0000;">
margin:0;#FF0000;"> padding:0;#FF0000;"> border:0;#FF0000;">
border-collapse:collapse;#FF0000;">
font-size:1em;
}
/* 非IE浏览器专用 */
.menu ul li:hover a {#FF0000;">
color:#fff;#FF0000;">
width:215px;
}
.menu ul li:hover ul {#FF0000;">
visibility:visible;
}
.menu ul li:hover ul li a {#FF0000;">
display:block;#FF0000;">
background:#eee;#FF0000;">
border:0;#FF0000;">
margin:0;#FF0000;">
text-indent:0;#FF0000;">
color:#333;#FF0000;">
font-weight:normal;#FF0000;">
font-size:0.9em;#FF0000;">
height:auto;#FF0000;">
line-height:1em;#FF0000;">
padding:5px;#FF0000;">
width:180px;#FF0000;">
text-align:left;
}
.menu ul li:hover ul li a:hover {#FF0000;">
background:#888;#FF0000;">
color:#fff;
}
如果是要支持IE6则要加上:
.menu ul li a:hover {#FF0000;">
width:215px;
}
.menu ul li a:hover ul {#FF0000;">
visibility:visible;
}
.menu ul li a:hover ul li a {#FF0000;">
display:block;#FF0000;">
background:#eee;#FF0000;">
border:0;#FF0000;">
margin:0;#FF0000;">
text-indent:0;#FF0000;">
color:#333;#FF0000;">
font-weight:normal;#FF0000;">
font-size:0.9em;#FF0000;">
height:auto;#FF0000;">
line-height:1em;#FF0000;">
padding:5px;#FF0000;">
width:190px;#FF0000;">
w\idth:180px;#FF0000;">
text-align:left;
}
.menu ul li a:hover ul li a:hover {#FF0000;">
background:#888;#FF0000;">
color:#fff;
}
/* 共用样式 */
.menu {#FF0000;">
font-family: verdana, sans-serif;#FF0000;">
position:relative;#FF0000;">
font-family: tahoma, geneva, ";#FF0000;">lucida sans unicode", "lucida grande",verdana, sans-serif;
margin-bottom:220px;
}
.menu ul {#FF0000;">
padding:0;#FF0000;">
margin:0;#FF0000;">
list-style-type: none;
}
.menu ul li {#FF0000;">
position:relative;#FF0000;">
float:left;
}
.menu ul li a, .menu ul li a:visited {#FF0000;">
display:block;#FF0000;">
text-decoration:none;#FF0000;">
width:25px;#FF0000;">
height:100px;#FF0000;">
font-weight:bold;#FF0000;">
background:transparent url(../../updata/tab.gif) top right no-repeat;#FF0000;">
text-indent:-999px;
}
.menu ul li ul {#FF0000;">
visibility:hidden;#FF0000;">
position:absolute;#FF0000;">
width:190px;#FF0000;">
top:0;#FF0000;">
left:0;#FF0000;">
border:1px solid #444;
}
table {#FF0000;">
margin:0;#FF0000;"> padding:0;#FF0000;"> border:0;#FF0000;">
border-collapse:collapse;#FF0000;">
font-size:1em;
}
/* 非IE浏览器专用 */
.menu ul li:hover a {#FF0000;">
color:#fff;#FF0000;">
width:215px;
}
.menu ul li:hover ul {#FF0000;">
visibility:visible;
}
.menu ul li:hover ul li a {#FF0000;">
display:block;#FF0000;">
background:#eee;#FF0000;">
border:0;#FF0000;">
margin:0;#FF0000;">
text-indent:0;#FF0000;">
color:#333;#FF0000;">
font-weight:normal;#FF0000;">
font-size:0.9em;#FF0000;">
height:auto;#FF0000;">
line-height:1em;#FF0000;">
padding:5px;#FF0000;">
width:180px;#FF0000;">
text-align:left;
}
.menu ul li:hover ul li a:hover {#FF0000;">
background:#888;#FF0000;">
color:#fff;
}
如果是要支持IE6则要加上:
.menu ul li a:hover {#FF0000;">
width:215px;
}
.menu ul li a:hover ul {#FF0000;">
visibility:visible;
}
.menu ul li a:hover ul li a {#FF0000;">
display:block;#FF0000;">
background:#eee;#FF0000;">
border:0;#FF0000;">
margin:0;#FF0000;">
text-indent:0;#FF0000;">
color:#333;#FF0000;">
font-weight:normal;#FF0000;">
font-size:0.9em;#FF0000;">
height:auto;#FF0000;">
line-height:1em;#FF0000;">
padding:5px;#FF0000;">
width:190px;#FF0000;">
w\idth:180px;#FF0000;">
text-align:left;
}
.menu ul li a:hover ul li a:hover {#FF0000;">
background:#888;#FF0000;">
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>
