IE6 下绝对定位position:absolute 与浮动不显示 (IE6 下拉菜单显示)
<HTML>
<HEAD>
<TITLE> New Document </TITLE>
<META NAME="Generator" CONTENT="EditPlus">
<META NAME="Author" CONTENT="">
<META NAME="Keywords" CONTENT="">
<META NAME="Description" CONTENT="">
<style type="text/css">
/*** menu skin ***/
.sf-menu {
float:left;
font: 12px Arial;
}
.sf-menu a {
padding:.75em 1em;
text-decoration:none;
}
.sf-menu ul a {
border-bottom: 1px solid #333;
}
.sf-menu a,.sf-menu a:visited {
/* visited pseudo selector so IE6 applies text colour*/
color:#eee;
}
.sf-menu li {
background:#444;
margin-right:2px;
}
.sf-menu>li {
border-top-right-radius:4px;
border-top-left-radius:4px;
-moz-border-radius-topleft:4px;
-webkit-border-top-left-radius:4px;
-moz-border-radius-topright:4px;
-webkit-border-top-right-radius:4px;
}
.sf-menu li li {
background:#444;
}
.sf-menu li li li {
background:#444;
}
.sf-menu li:hover,.sf-menu li.sfHover,.sf-menu a:focus,.sf-menu a:hover,.sf-menu a:active {
background:#555;
outline:0;
}
.sf-menu>li:hover,.sf-menu>li.sfHover,.sf-menu a:focus,.sf-menu a:hover,.sf-menu a:active {
border-top-right-radius:4px;
border-top-left-radius:4px;
-moz-border-radius-topleft:4px;
-webkit-border-top-left-radius:4px;
-moz-border-radius-topright:4px;
-webkit-border-top-right-radius:4px;
}
.sf-menu li.current {
background: #266DBB;
}
.sf-menu,.sf-menu {
margin:0;
padding:0;
list-style:none;
}
.sf-menu {
line-height:1.0;
}
.sf-menu ul {
/*position:absolute;*/
top:-999em;
width:12em;
}
.sf-menu ul li {
width:100%;
}
.sf-menu li:hover {
visibility:inherit;
}
.sf-menu li {
float:left;
position:relative;
}
.sf-menu a {
display:block;
position: relative;
}
.sf-menu li:hover ul,.sf-menu li.sfHover ul {
left:0;
top:2.5em;
z-index:99;
}
ul.sf-menu li:hover li ul,ul.sf-menu li.sfHover li ul {
top: -999em;
}
ul.sf-menu li li:hover ul,ul.sf-menu li li.sfHover ul {
left:12em;
top:0;
}
ul.sf-menu li li:hover li ul,ul.sf-menu li li.sfHover li ul {
top: -999em;
}
ul.sf-menu li li li:hover ul,ul.sf-menu li li li.sfHover ul {
left:12em;
top:0;
}
ul.sf-menu li ul
{
clear:both;
position:absolute;
left:-18px; top:30px;/*指定显示菜单的位置，如果不指定，ie6就不能显示子菜单*/
}
/*#nav li ul
{
clear:both;
position:absolute;
left:-18px; top:30px;
} */
#nav li ul li
{
display: none;
clear:both;
}
#nav li.sfhover ul li, #nav li:hover ul li
{
display: block;
}
</style>
<script type="text/javascript"><!-- //--><![CDATA[//><!--
//IE6 要调用此方法才能显示子菜单
sfHover = function () {
var sfEls = document.getElementById("nav").getElementsByTagName("li");
for (var i = 0; i < sfEls.length; i++) {
sfEls[i].onmouseover = function () {
this.className += " sfhover"
}
sfEls[i].onmouseout = function () {
this.className = this.className.replace(new RegExp(" sfhover\\b"), "")
}
}
}
if (window.attachEvent) window.attachEvent("onload", sfHover);
//--><!]]>
</script>
</HEAD>
<BODY>
<div id="menu" style="z-index: 990;" >
<ul class="sf-menu" id="nav" >
<li class=''><a href='#2'>明细查询</a>
<ul >
<li ><a href='TemperatureSearch.aspx'>温度</a> </li>
<li ><a href='HumiditySearch.aspx'>湿度</a> </li>
<li ><a href='WaterQualitySearch.aspx'>纯水电阻率</a> </li>
<li ><a href='CleanSearch.aspx'>洁净度</a> </li>
<li ><a href='WaterPressureSearch.aspx'>水压</a> </li>
</ul>
</li>
</ul>
</div>
<br />
<div style="border:solid 1px black; background-color: rosybrown; z-index: 1;">
内容 <br />
内容 <br />
内容 <br />
内容 <br />
内容 <br />
</div>
</BODY>
</HTML>
IE6 下绝对定位position:absolute 与浮动不显示 (IE6 下拉菜单显示)的更多相关文章
- IE6/IE7下绝对定位position:absolute和margin的冲突问题解决
首先我们来看一个代码: 复制代码代码如下:<div id=”layer1″ style=”margin:20px; border:1px solid #F88; width:400px; “&g ...
- IE6和IE7下绝对定位position：absolute和margin的冲突问题解决
绝对定位的Position:absoulte的元素,会让相邻的兄弟元素的margin-top失效.而如果去掉了兄弟元素的高度又会正常. <div id="layer1" st ...
- 层模型--绝对定位(position:absolute)
如果想为元素设置层模型中的绝对定位,需要设置position:absolute(表示绝对定位),这条语句的作用将元素从文档流中拖出来,然后使用left.right.top.bottom属性相对于其最接 ...
- 绝对定位position: absolute;
<!DOCTYPE html> <html lang="en"> <head> <meta charset="UTF-8&quo ...
- -第2章 JS方法实现下拉菜单显示和隐藏
知识点 onmouseover 鼠标经过 onmouseout 鼠标移出 function 关键字 getElementsByTagName 获取一组标签 length 获取对象成员个数 思路 给一级 ...
- -第3章 jQuery方法实现下拉菜单显示和隐藏
知识点 jquery 的引入方式 本地下载引入 在线引入 children 只获取子元素,不获取孙元素 show() 显示. hide() 隐藏. 完整代码 <!-- Author: XiaoW ...
- django 下拉菜单显示为object的解决办法
在创建完Django数据库结构之后,使用Django自带的强大的admin功能往数据库中添加数据,图形化界面如下: 但时候有下拉框选项(只要在model中有定义Charfield就会显示为下拉框),如 ...
- layui编辑商品时，怎么使用下拉菜单显示商品默认分类的问题
//加载商品默认的分类$.get('/admin/category/selec/' + {$simple.0.first_pid},function(msg){ $("#two_cate&q ...
- bootstrap悬停下拉菜单显示
使用Bootstrap导航条组件时,如果你的导航条带有下拉菜单,那么这个带下拉菜单的导航在点击时只会浮出下拉菜单,它本身的href属性会失效,也就是失去了超链接功能,这并不是我想要的,我希望导航条的链 ...
随机推荐
- 在CentOS上源码安装Nginx
总步骤: wget http://nginx.org/download/nginx-1.10.1.tar.gz tar -xvf nginx-1.10.1.tar.gz cd nginx-1.10.1 ...
- AngularJS（五）：表单及输入验证
本文也同步发表在我的公众号“我的天空” 表单基础 表单是HTML中很重要的一个部分,基本上我们的信息录入都依靠表单,接下来我们学习如何在AngularJS中使用表单,首先看以下示例代码: <bo ...
- U3D加载服务器上的assetbundle
在Unity3D中,如果加载服务器上的AssetBundle,总是会提示找不到crossdomain.xml文件,即使添加了该文件,也会报同样的错误.属于跨域访问报错的问题. 官方的解决方案如下: h ...
- Java transient关键字使用
1. transient的作用及其使用方法 我们都知道一个对象只要实现了Serilizable接口,这个对象就可以被序列化,java的这种序列化模式为开发者提供了很多便利,我们可以不必关系具体序列化的 ...
- pc端常见布局---水平居中布局 单元素定宽
<!DOCTYPE html> <html> <head> <meta charset="utf-8"> <title> ...
- Iterator中的next()
DBExchangeMoney类: 1 package com.ch.test15; import java.sql.DriverManager; import java.sql.ResultSet; ...
- UVA 690 PipelineScheduling 位运算+dfs+剪枝
一开始最容易想到间隔最多为n,但是结点还是太多了,需要优化. 预处理:预判一下并保存下一个可以放的位置距离之前的距离.这样可以减少很多判断. 最优化剪枝:如果当前长度+剩下没放的程序*最短间隔如果大于 ...
- PAT (Basic Level) Practise （中文）-1039. 到底买不买（20）
PAT (Basic Level) Practise (中文)-1039. 到底买不买(20) http://www.patest.cn/contests/pat-b-practise/1039 小红 ...
- java基础—this关键字
一.this关键字
- 汉明码（Hamming Code）原理及实现
汉明码实现原理 汉明码(Hamming Code)是广泛用于内存和磁盘纠错的编码.汉明码不仅可以用来检测转移数据时发生的错误,还可以用来修正错误.(要注意的是,汉明码只能发现和修正一位错误,对于两位或 ...