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属性会失效,也就是失去了超链接功能,这并不是我想要的,我希望导航条的链 ...
随机推荐
- RSA_new()初始化和RSA_free()释放RSA结构体后依然会有内存泄漏（转）
在使用OpenSSL的RSA加解密的时候,发现RSA_new()初始化和RSA_free()释放RSA结构体后依然会有内存泄漏.网上Baidu.Google之,发现这个相关信息很少(至少中文搜索结果是 ...
- Outlook Web App 客户端超时设置
这篇文章我们讨论一下,OWA 2013在公共和私人的电脑是如何启用和配置. Exchange 2013 Outlook Web App (OWA) 登录页不再允许用户选择无论他们正在使用公共的或私人的 ...
- 扒一扒IT大佬高考：马云数学1分考北大 李彦宏是状元
http://news.cnblogs.com/n/522622/ 高考今天正式拉开序幕,而像李彦宏.马云等 IT 大佬之前也都参加过高考,他们成绩又都是怎样的呢? 马化腾:放弃天文梦选择计算机 20 ...
- python基础教程总结15——5 虚拟茶话会
聊天服务器: 服务器能接受来自不同用户的多个连接: 允许用户同时(并行)操作: 能解释命令,例如,say或者logout: 容易拓展 套接字和端口: 套接字是一种使用标准UNIX文件描述符(file ...
- CodeForces 66C Petya and File System （实现）
模拟题,map搞一搞.要想清楚一个结点应该是要通过一个字符串找到下一个结点,题目保证所以文件夹非空,所以只要判断一个结点是不是叶子结点就可以判断它是不是文件,用了点c11的特性. #include&l ...
- linux文本处理工具及正则表达式
cat命令:查看文本内容 cat [选项]... [文件]... -E 显示行结束符 -n 显示文本内容时显示行号 -A 显示所以控制符 -b 非空行编号 -s 压缩连 ...
- bootstrap 超大屏幕(Jumbotron)
本章将讲解Bootstrap的一个特性:超大屏幕(Jumbonron),顾名思义该组件可以增加标题的大小,并为登录页面的内容添加更多的外边矩. 使用超大屏幕的步骤如下: 1.创建一个还有class.j ...
- 约束Constraints
1.setNeedsUpdateConstraints:当想要调整子视图布局时,在主线程调用该方法标记constraint需要在未来的某个点更新(该方法不会立刻强制刷新constraint,而是等待下 ...
- bash编程之循环控制：
bash编程之循环控制: for varName in LIST; do 循环体 done while CONDITION; do 循环体 done until CONDITION; do 循 ...
- C++中有三种创建对象的方法
#include <iostream> using namespace std; class A { private: int n; public: A(int m):n(m) { } ~ ...