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属性会失效,也就是失去了超链接功能,这并不是我想要的,我希望导航条的链 ...
随机推荐
- vue2.0：（九）、外卖App弹窗部分星星评分
本篇是星星评分部分,先上代码: 1.header.vue: <template> <transition name="fade"> & ...
- 关于如何将html中的表格下载成csv格式的方法
今天在网上看了很多方法,自己还是慢慢探索写出了最终效果 简单代码如下: <!DOCTYPE html> <html> <head> <meta content ...
- Sqoop基础学习(1)
1. Sqoop的导入过程 在开始导入之前,Sqoop会通过JDBC来获得所需要的数据库元数据 1.导入表的列名.数据类型等: 2.接着这些数据库的数据类型(varchar.number等)会把映射成 ...
- 《学习CSS布局》学习笔记
近几天做了一个小的企业展示网站.虽然页面是在模板的基础上改的,但改的多了不熟悉CSS也很麻烦.正好我看到了学习CSS布局这个网站,于是补习了一下CSS知识. CSS的显示 CSS的元素分为两类:块级元 ...
- 为Oracle Clusterware修改公用及私有网络接口
出于种种原因我们可能需要为已安装的Oracle集群软件修改其使用的公用或私有网络所使用的网络接口(How to Change Interconnect/Public Interface IP or S ...
- codeforce Gym 100342J Triatrip （bitset）
傻逼题,但是为什么别人的O(n^3)不会T?只是因为用了bitset优化... 附上一张bitset基本操作的表 #include<bits/stdc++.h> using namespa ...
- 【转】NSBundle的使用，注意mainBundle和Custom Bundle的区别
1.[NSBundle mainBundle],文件夹其实是Group,如左侧的树形文件管理器 Build之后,文件直接就复制到了根目录下,于是读取的方法,应该是这样: NSString *earth ...
- 【Python全栈-JavaScript】JavaScript-字符串详解
JavaScript-字符串详解 预热:Number() 方法 <script> //重要等级 1,2,3,4,5 var s=10; //最高级别5 var s1=new Number( ...
- c#中的自定义泛型类、泛型方法和泛型接口
泛型的产生其中一个原因就是为了解决原来集合类中元素的装箱和拆箱问题: 一.泛型类: /// <summary> /// 返回前台的消息 /// </summary> ...
- 不安装oracle客户端如何使用plsql连接数据库
不安装oracle客户端如何使用plsql连接数据库 1. 准备工作 1.1下载plsqldev破解版软件 我这里使用plsqldev715版本 1.2下载instantclient-basic-wi ...