用CSS制作兼容多浏览量器的隐藏菜单
作者:CSSPLAY 来源:netvtm.com 发布时间:2007-08-30 09:05:00
标签:菜单,隐藏,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(https://www.aspxhome.com/images/logo.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;
}
HTML代码:
<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>
0
投稿
猜你喜欢
- 原文地址:30 Days of Mootools 1.2 Tutorials - Day 21 - Classes part
- 用下列代码即可:<%On error resume nextSet session=Creat
- 终于完成了偶的拖动窗口,花了近15个小时,庆祝一下(*^__^*);以前写了IE下的功能,于是又写了firefox下的功能,在firefox
- PHP是一种面向对象的编程语言,它允许开发者使用面向对象的编程技术来构建复杂的应用程序。下面是一些关于PHP面向对象编程的讲解:类与对象类是
- 在Flash播放器运行时,将不同来源的资源划分到独立的沙箱(sandbox)内,不同沙箱之间不能彼此操作数据(除非目标沙箱做过一些设置,授权
- 昨天Steve的 讲座涉及了一个我从没考虑的领域,在没法优化后台服务器的时候,如何合理的放置网页的元件让她们在浏览器里显示得更加快。这里,我
- 代码如下:<% Function Bytes2bStr(vin,cSet) Dim BytesStream,StringReturn
- 1. TVP, 表变量,临时表,CTE 的区别 TVP和临时表都是可以索引的,总是存在tempdb中,会增加系统数据库开销,而表变量和CTE
- 分享人:月漓作为交互设计师,你是否在一个项目中花费大量的时间来沟通、修改、明确需求?其实这些前期工作(设计原型前)是我们和PD、运营、开发之
- 第一步:保存下列文件为:CALENDAR.ASP <%@ LANGUAGE = V
- 因为一个需求,因为自己想多了一点东西,最后发现了一个问题,一个很奇怪的问题。这个问题我想还是我自己当初想法上的出路导致的吧,但想不通为什么会
- 假如您在安装SQL Server 2005时出现计数器错误,在搜索过所有的方法都不适用的情况下可以采用以下方法:将4个计数器删除:(如果没有
- 本文介绍了10个asp网页制作的常用到的技巧,有asp的也有javascript。如asp如何获取系统时间,如何取得IP,及浏览
- 什么是索引拿汉语字典的目录页(索引)打比方:正如汉语字典中的汉字按页存放一样,SQL Server中的数据记录也是按页存放的,每页容量一般为
- 本游戏程序实现的功能为本地二人对弈中国象棋,实现语言为javascript+VML,在windows 2000 pro+IE 6sp1的环境
- 不了解的同学先“点这里”看看什么是Firebug。简单来说,Firebug是Firefox上用来监视、编辑和调试站点的CSS、HTML、DO
- 如何在一个广告旗帜里轮番显示时间长度不一的不同广告?好了,下面就是Ad Rotator组件完整的应用例子:adrot.asp<html
- 日期和时间类型MySQL有多个表示各种日期和时间值的数据类型, 比如YEAR和DATE. MySQL存储时间的最精确粒度是秒。 然而, 能做
- 分页显示是页面常用技术,可用下列代码来实现:<%page=Request.QueryString("page&q
- 各位想必都知道,onfocus="this.blur()"这条代码能消除链接时的虚线框,但你有没有想过,如果你的网页上有