想仿照新浪微博做一个上面的导航条(toolbar),就是鼠标移上去,就能显示面板那种.
就像这样
不想用js脚本搞来搞去,打算直接用hover伪类来着.
每个弹出的面板是absolute定位的,结果发现IE7下鼠标一从面板的文字(即"我的首页弹出层"这几个字)上面移开,面板马上消失的无影无踪.后来给面板加上了白色的背景色才正常了起来
background-color: white;
和这位老兄遇到的问题很有相似之处啊
http://hi.baidu.com/1b1b1/item/f10d301919e07709e75c366b
代码放这里备忘,反正是各种浏览器不兼容.....
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Strict//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-strict.dtd">
<html xmlns="http://www.w3.org/1999/xhtml">
<head>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
<title>顶部固定菜单</title>
<style type="text/css">
* {
margin: 0;
padding: 0;
}
.nav-wrapper-fixed {
position: fixed;
top: 0;
width: 100%;
height: 25px;
background-color: #3FA7CB;
}
.nav-wrapper-fixed .item {
width: 100px;
height: 25px;
float: left;
}
.nav-wrapper-fixed .item:hover {
background-color: white;
}
.nav-wrapper-fixed .item:hover .panel {
display: block;
background-color: white;
}
.nav-wrapper-fixed .panel {
width: 300px;
height: 200px;
position: absolute;
top: 25px;
left: 0px;
display: none;
border-style: none solid solid solid;
border-color: green;
border-width: 1px;
}
.nav-wrapper-fixed .nav {
width: 500px;
position: relative;
margin: 0 auto 0 auto;
}
.main {
margin-top: 50px;
}
</style>
</head>
<body style="height: 2000px;">
<div class="nav-wrapper-fixed" id="navFixed">
<div class="nav" id="nav">
<div class="item">
<span>个人中心</span>
<div class="panel">个人中心弹出层</div>
</div>
<div class="item">
<span>我的首页</span>
<div class="panel">我的首页弹出层</div>
</div>
<div class="item">
<span>应用</span>
<div class="panel">应用弹出层</div>
</div>
</div>
</div>
<div class="main">
<ul>
<li>all kinds of crap</li>
<li>all kinds of crap</li>
<li>all kinds of crap</li>
<li>all kinds of crap</li>
<li>all kinds of crap</li>
<li>all kinds of crap</li>
<li>all kinds of crap</li>
<li>all kinds of crap</li>
<li>all kinds of crap</li>
<li>all kinds of crap</li>
<li>all kinds of crap</li>
<li>all kinds of crap</li>
<li>all kinds of crap</li>
<li>all kinds of crap</li>
<li>all kinds of crap</li>
<li>all kinds of crap</li>
</ul>
</div>
</body>
</html>
.
分享到：
相关推荐
兼容IE6的Fixed定位示例，通过Exp和JS判断浏览器，然后选择是否降级
认为他们的样式和效果都是比较人性化的，不过很多时候还是不得不考虑其他版本浏览器的感受，这里IE6就不用考虑他了，这货简直就是IT史上的奇葩，这里要说一个IE7的绝对定位和相对定位后，出现元素遮挡的问题。...
如下 1，两个div，d1中包含d2 2，d1，d2都设置了absolute或relative 3，隐藏d1 4，隐藏子元素d2 5，显示d1 这时IE6/7 and IE8/9/10(IE7模式)中会发现，子元素d2也能显示出了(别忘了，d2被display:none 了哦)。但IE8/...
CSS 绝对定位属性absolute用法初探
对定位属性值进行详解，和...在本文中，任何一个元素都被文本流所限制了自身的位置，但是通过CSS我们依然使得这些元素可以改变自己的位置，我们可以通过float来让元素浮动，我们也可以通过margin来让元素产生位置移动。
有时候，我们需要如下图这样一个悬浮效果需求： 实现 在标准的正常的情况下，只能使用 绝对定位 来完成。 第一步：父容器定位设置为 relative（相对定位）。 第二步：子容器定位设置为 absolute（绝对定位）。 ...
java 7 for absolute beginners
, 绝对定义(position:absolute)的相邻元素margin-top失效，但如果相邻元素(layer3)去掉width属性，margin-top又会生效,针对这个问题，本文将给予正确的解释，感兴趣的你可以参考下，或许可以帮助到你
但是，IE6 IE7 IE8 这三个版本都有各自不同的表现，实在是太让人难受了。 前两天碰到了这个奇怪的问题： 绝对定位的元素，紧邻着两个浮动元素。Firefox 中一切正常，IE6 中绝对定位元素消失了。 解决方法：只要别让...
属性：position 作用：检索或者设置元素的定位方式（改变元素位置的属性） ... b : 假如 当前没有父元素 或者 父元素没有定位的情况下，以整个文档为参照物。 c : 绝对定位，脱离文档流、不占据空间
这个数据库看性能不错，哪位能破解一下。Overview Absolute Database: Delphi database with SQL support.Absolute Database lets you forget the Borland Database Engine (BDE). This BDE replacement is the ...
position：absolute属性在其他浏览器中都是正常的，但惟独在ie6下有问题，下面是经过测试可行的解决方法
做一些浮动层等特殊特殊效果时要考虑到定位问题就要用到Position属性，其有四个属性值：static、fixed、absolute和relative，想必后面两个大家都熟悉吧
Absolute_Database_7.90_Single-User_Edition_Delphi_XE7_Cplusplus_Builder_XE7_Downloadly.ir.rar
回想在网上看过的一篇文档，大意就是，如果在IE7中使用position:relative属性，需要在该元素的容器上，同时给予position:relative属性。 我给了。大按钮上的链接都恢复了。但是”css”"js”"seo”3个小按钮上没有...
概述： IE6不支持固定定位（position:fixed）是众所周知的事情，所以我们要想在IE6做出固定定位的效果就只能用JS，但是用js会出现“跳动”的效果，所以有没有不用JS而且不跳动的办法呢？这是怎么做到的呢？今天说说...
/*去除图片边框，默认情况下，链接内的图片在标准浏览器会出现边框*/ display:block; position: absolute;/*用绝对定位抽离正常文本流，不然在设计的时候考虑到不同浏览器正常显示会更麻烦*/ top:5px;/*这里的5px...