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属性会失效,也就是失去了超链接功能,这并不是我想要的,我希望导航条的链 ...
随机推荐
- Java实现将GBK编码格式的文件夹中所有文件都转化为UTF-8格式的文件，编码格式转化
package CodeConvert; import Java.io.BufferedReader; import java.io.BufferedWriter; import java.io.Fi ...
- 1008 选数 2002年NOIP全国联赛普及组
1008 选数 2002年NOIP全国联赛普及组 时间限制: 1 s 空间限制: 128000 KB 题目等级 : 黄金 Gold 题解 查看运行结果 题目描述 Description ...
- Kendo UI 初始化 Data 属性
初始化 Data 属性 前面在介绍准备 Kendo UI 开发环境时我们使用 jQuery 的方法将一个 HTML 元素转换成一个 Kendo UI 控制项: $(“#datepicker”).ke ...
- [opencv bug] orb flannBaseMatcher Exception
when i use flannBaseMathcer to match 2 sets of orb descriptor, it occured an exception : unsigned lo ...
- wireshark使用教程及TCP三次握手实例
安装后,选择对应访问网络的网卡,即可看到下面的主界面 具体说下封包详细信息 (Packet Details Pane) 这个面板是我们最重要的,用来查看协议中的每一个字段. 各行信息分别为 Frame ...
- 到底什么样的ABAP系统能运行Fiori应用
有朋友在微信上问我两个问题: S/4 fiori是标配吗? 如果是ERP R/3,可以激活fiori配置吗? 先回答第二个问题. 在Jerry的微信公众号文章SAP Fiori应用的三种部署方式曾经提 ...
- openstack keystone修改horizon密码
命令行修改密码:token在/etc/keystone/keystone.conf中的一个admin_token export OS_SERVICE_TOKEN=165a1766c12a497b8fb ...
- js实现23种设计模式(收藏)
js实现23种设计模式 最近在学习面向对象的23种设计模式,使用java 和 javascript 实现了一遍,但是因为目前大三,还没有比较正规的大项目经验,所以学习的过程种我觉得如果没有一定的项目经 ...
- github：Commit failed - exit code 1 received
问题 使用github desktop 将项目提交到github,但提示Commit failed - exit code 1 received 开始以为名称过程,把名称改短,但还是失败. 原因 因为 ...
- php常见验证
/** * 文件上传 * @param $file 要上传的文件 * @param $size 大小设置 * @param $ext 文件类型 * @return bool 是否上传成功 */func ...