用CSS制作隐藏菜单

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(../../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>

以上是小编为您精心准备的的内容，在的博客、问答、公众号、人物、课程等栏目也有的相关内容，欢迎继续使用右上角搜索按钮进行搜索menu
， color
， background
， ul制作菜谱的代码
， width
， px
， 隐藏li显示
hover
css制作隐藏菜单、css隐藏下拉菜单、a标签下拉菜单css隐藏、纯css3 隐藏 菜单、css菜单栏隐藏，以便于您获取更多的相关知识。