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属性会失效,也就是失去了超链接功能,这并不是我想要的,我希望导航条的链 ...
随机推荐
- Emacs中自动刷新dired缓冲区
Emacs中自动刷新dired缓冲区 在dired模式中,如果在不同buffer间切换,buffer不会自动更新,有时还需要手工按“g”键,比较麻烦,如下设置和代码能够在buffer切换和执行shel ...
- JFinal教程：JFinal极速开发企业实战百集JFinal视频教程发布
课程名称:JFinal极速开发企业实战 课程长度:100课时 课程作者:小木(909854136) 课程地址:http://edu.csdn.net/course/detail/1968 官网网址:h ...
- pc端常见布局样式总结（针对常见的）
<!DOCTYPE html> <html> <head> <meta charset="utf-8"> <title> ...
- pre-empting taskintel手册-Chapter7-Task Management
这节描述了IA-32架构的任务管理功能,只有当处理器运行在保护模式的时候,这个功能才是有效的,这节的侧重点在32位任务和32位TSS结构上,关于16位的任务和16位TSS结构,请看7.6节,关于64位 ...
- FZU 2204 7
题意: n个有标号的球围成一个圈.每个球有两种颜色可以选择黑或白染色.问有多少种方案使得没有出现连续白球7个或连续黑球7个? 思路: 如果出现连续的8,9...个球同色,那么也必定含有7个同色.需要统 ...
- LeetCode Min Stack 最小值栈
题意:实现栈的四个基本功能.要求:在get最小元素值时,复杂度O(1). 思路:链表直接实现.最快竟然还要61ms,醉了. class MinStack { public: MinStack(){ h ...
- 手写IOC框架
1.IOC框架的设计思路 ① 哪些类需要我们的容器进行管理 ②完成对象的别名和对应实例的映射装配 ③完成运行期对象所需要的依赖对象的依赖
- 百度site网址显示完整站点信息的分析
去年赛花红就发现百度site本博客网址,仅出现找到相关结果数约多少个,数字为估算值,网站管理员如需了解更准确的索引量,请使用百度站长平台等字样.但赛花红又发现有的网站却显示着完整的站点信息,当时以为是 ...
- Newtonsoft.Json初探
1.序列化 VehicleModelSearchingModel model = new VehicleModelSearchingModel() { brandId = , modelIds=&qu ...
- 201621123080《Java程序设计》第十一周学习总结
201621123080<Java程序设计>第十一周学习总结 1. 本周学习总结 1.1 以你喜欢的方式(思维导图或其他)归纳总结多线程相关内容. 2. 书面作业 本次PTA作业题集多线程 ...