网站建设|北京网站建设|北京网站制作|北京网站建设首选品牌【企通互联】

作者： 北京网站建设   日期：2008-03-27 06:03:34  来源： http://www.qitongnet.com

简洁的隐藏垂直菜单在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;  www.qitongnet.com网站制作
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>