导航下拉菜单被select框遮盖问题
文章来源：365jz.com 点击数：839 更新时间：2009-12-28 23:18 参与评论
导航的下拉菜单被靠近导航的select框遮住了，这个情况只在IE6情况下发生，属于IE6的一个缺陷，先不管多么痛恨IE的种种不是吧，现在网上比较流行的方法目前大致有三种：
1.点击下拉菜单隐藏select //我觉得这个方法不太实用
2.把下拉菜单放在iframe元素上面
3.JavaScript模拟一个select菜单 不使用系统默认的select //我感觉这个操作起来比较麻烦，效率也不高
第二种方法是大家比较认可的，原理是 div直接盖不住select 但是div可以盖iframe，而iframe可以盖select, 所以，把一个iframe来当作div的底， 这个div就可以盖住select了，我经过实践，发现还是不那么好用，下面在改进的基础上做了自己的方法，分享如下：
------------------------------------------------------------------------------
我的解决方法：Jquery+css
第一步：到网站http://jquery.com/上下载jquery-1.3.2.min.js文件，整个工程引用该文件。
即将<script type="text/javascript" language="javascript" src="jquery-1.3.2.min.js"> </script>加到页面<head></head>中，注意src的路径随情况而变。
代码
1.点击下拉菜单隐藏select //我觉得这个方法不太实用
2.把下拉菜单放在iframe元素上面
3.JavaScript模拟一个select菜单 不使用系统默认的select
第二种方法是大家比较认可的，原理是
------------------------------------------------------------------------------
我的解决方法：Jquery+css
第一步：到网站http://jquery.com/上下载jquery-1.3.2.min.js文件，整个工程引用该文件。
即将<script type="text/javascript" language="javascript" src="jquery-1.3.2.min.js"> </script>加到页面<head></head>中，注意src的路径随情况而变。
第二步：具体实现代码
代码
JS代码：用于判断浏览器的版本
<script type="text/JavaScript">
function getIE(){
if(navigator.appName == "Microsoft Internet Explorer")
{
if(navigator.appVersion.match(/7./i)=='7.'|| navigator.appVersion.match(/8./i)=='8.')
{
//是IE7，不写iframe
}else{
//不是，写iframe
document.write("<iframe style=\"position:absolute; top:0px; left:0px; width:100px; height:22px; z-index:-1; \"></iframe>");
}
}
}
</script>
源码：
<div class="loadmenu">
<ul class="menu" id="navmenu">
<li><a href="/CAT4.1Setup/BasicInfo/UnitManage.aspx" class="libg">信息管理</a>
<ul>
<li><a href="/CAT4.1Setup/BasicInfo/UnitManage.aspx">机构管理</a></li><script>getIE();</script>
<li><a href="/CAT4.1Setup/BasicInfo/VehicleList.aspx">车辆管理</a></li><script>getIE();</script>
</ul>
</li>
<li><a href="/CAT4.1Setup/EquipmentMonitor/EqptInspection.aspx" class="libg">车辆监控</a>
<ul>
<li><a href="/CAT4.1Setup/EquipmentMonitor/EqptInspection.aspx">车辆巡检</a></li><script>getIE();</script>
<li><a href="/CAT4.1Setup/EquipmentMonitor/EqptLockedLog.aspx">锁车管理</a></li><script>getIE();</script>
<li><a href="/CAT4.1Setup/EquipmentMonitor/EqptSingleRunManage.aspx">单车工作跟踪& lt;/a></li><script>getIE();</script>
</ul>
</li>
<li><a class="libg" href="/CAT4.1Setup/Operation/OperEfficiencyPerday.aspx">运行管理</a> </li>
</ul>
</div>
CSS样式：
#navmenu { float:left; list-style: none; height:22px; margin-left:10px; }
#navmenu *{float:left; }
#navmenu a { float:none; color:#fff; display:block; line-height:22px; }
#navmenu a:hover{ background:#eee; }
#navmenu li { width:100px; border-right:1px solid #fff; text-align:center; position: relative; height: 22px; }
#navmenu li li{ border-right:0;}
#navmenu li ul { background:#444; border-bottom:1px solid #fff; width:100px; display:none; position:absolute; top:22px; left:0px; z-index:1000;}
#navmenu li:hover ul{ background:#444; display:block; overflow:hidden; }
#navmenu li:hover ul li{ width:100%; height:22px; border-top:1px solid #fff;}
#navmenu li:hover ul li a{ width:100%; line-height:22px; color:#fff }
#navmenu li:hover ul li a span{ }
#navmenu li:hover ul li a:hover{ background:#eee; color:#000; }
#navmenu li ul:after { clear: both; display: block; font: 1px/0px serif; content: "."; height: 0; visibility:visible; }
#navmenu li ul li a { display:block;}
* html #navmenu a { height: 1%; }
* html #navmenu ul a { height:22px; line-height:22px; overflow:hidden; }
* html #navmenu li.iehover li a { float: none; background:#000; color:#fff; }
* html #navmenu li.iehover li.iehover a { height:22px; line-height:22px; background:#eee; color:#000; }
* html #navmenu li li{ height:22px; border-top:1px solid #fff; }
<script type="text/JavaScript">
function getIE(){
if(navigator.appName == "Microsoft Internet Explorer")
{
if(navigator.appVersion.match(/7./i)=='7.'|| navigator.appVersion.match(/8./i)=='8.')
{
//是IE7，不写iframe
}else{
//不是，写iframe
document.write("<iframe style=\"position:absolute; top:0px; left:0px; width:100px; height:22px; z-index:-1; \"></iframe>");
}
}
}
</script>
源码：
<div class="loadmenu">
<ul class="menu" id="navmenu">
<li><a href="/CAT4.1Setup/BasicInfo/UnitManage.aspx" class="libg">信息管理</a>
<ul>
<li><a href="/CAT4.1Setup/BasicInfo/UnitManage.aspx">机构管理</a></li><script>getIE();</script>
<li><a href="/CAT4.1Setup/BasicInfo/VehicleList.aspx">车辆管理</a></li><script>getIE();</script>
</ul>
</li>
<li><a href="/CAT4.1Setup/EquipmentMonitor/EqptInspection.aspx" class="libg">车辆监控</a>
<ul>
<li><a href="/CAT4.1Setup/EquipmentMonitor/EqptInspection.aspx">车辆巡检</a></li><script>getIE();</script>
<li><a href="/CAT4.1Setup/EquipmentMonitor/EqptLockedLog.aspx">锁车管理</a></li><script>getIE();</script>
<li><a href="/CAT4.1Setup/EquipmentMonitor/EqptSingleRunManage.aspx">单车工作跟踪& lt;/a></li><script>getIE();</script>
</ul>
</li>
<li><a class="libg" href="/CAT4.1Setup/Operation/OperEfficiencyPerday.aspx">运行管理</a> </li>
</ul>
</div>
CSS样式：
#navmenu { float:left; list-style: none; height:22px; margin-left:10px; }
#navmenu *{float:left; }
#navmenu a { float:none; color:#fff; display:block; line-height:22px; }
#navmenu a:hover{ background:#eee; }
#navmenu li { width:100px; border-right:1px solid #fff; text-align:center; position: relative; height: 22px; }
#navmenu li li{ border-right:0;}
#navmenu li ul { background:#444; border-bottom:1px solid #fff; width:100px; display:none; position:absolute; top:22px; left:0px; z-index:1000;}
#navmenu li:hover ul{ background:#444; display:block; overflow:hidden; }
#navmenu li:hover ul li{ width:100%; height:22px; border-top:1px solid #fff;}
#navmenu li:hover ul li a{ width:100%; line-height:22px; color:#fff }
#navmenu li:hover ul li a span{ }
#navmenu li:hover ul li a:hover{ background:#eee; color:#000; }
#navmenu li ul:after { clear: both; display: block; font: 1px/0px serif; content: "."; height: 0; visibility:visible; }
#navmenu li ul li a { display:block;}
* html #navmenu a { height: 1%; }
* html #navmenu ul a { height:22px; line-height:22px; overflow:hidden; }
* html #navmenu li.iehover li a { float: none; background:#000; color:#fff; }
* html #navmenu li.iehover li.iehover a { height:22px; line-height:22px; background:#eee; color:#000; }
* html #navmenu li li{ height:22px; border-top:1px solid #fff; }
第三步：编辑CSS样式，实现你想要的页面的样式 总结：这个方法是从整个项目工程优化，CSS样式综合方面考虑的结果，能兼容所有的浏览器，方法也简单明了，引用起来比较方便。如果有朋友想采纳，不明白的地方可以给我留言。
如对本文有疑问，请提交到交流论坛，广大热心网友会为你解答！！ 点击进入论坛
------分隔线----------------------------
