天极传媒:
天极网
比特网
IT专家网
52PK游戏网
极客修
全国分站

北京上海广州深港南京福建沈阳成都杭州西安长春重庆大庆合肥惠州青岛郑州泰州厦门淄博天津无锡哈尔滨

产品
  • 网页
  • 产品
  • 图片
  • 报价
  • 下载
全高清投影机 净化器 4K电视曲面电视小家电滚筒洗衣机
您现在的位置: 天极网 > 软件 > 网页>新闻>用CSS制作隐藏菜单

用CSS制作隐藏菜单

www.netvtm.com2006-05-24 15:50我要吐槽

  简洁的隐藏垂直菜单在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>
作者:CSSPLAY责任编辑:龙犊)
请关注天极网天极新媒体 最酷科技资讯
扫码赢大奖
评论
* 网友发言均非本站立场,本站不在评论栏推荐任何网店、经销商,谨防上当受骗!
热点推荐
微软Windows 10操作系统Win10系统在Win8的基础上对界面、特性以及跨平台方面做了诸多优化。[详细]
Windows 10 新视界 [进入频道][使用技巧][微博互动]
手机整机DIY企业级