您現(xiàn)在的位置： 365建站網(wǎng) > 365文章 > 導(dǎo)航下拉菜單被select框遮蓋問題

導(dǎo)航下拉菜單被select框遮蓋問題

文章來源：365jz.com 點(diǎn)擊數(shù)：848 更新時(shí)間：2009-12-28 23:18 參與評論

導(dǎo)航的下拉菜單被靠近導(dǎo)航的select框遮住了，這個(gè)情況只在IE6情況下發(fā)生，屬于IE6的一個(gè)缺陷，先不管多么痛恨IE的種種不是吧，現(xiàn)在網(wǎng)上比較流行的方法目前大致有三種：
1.點(diǎn)擊下拉菜單隱藏select //我覺得這個(gè)方法不太實(shí)用
2.把下拉菜單放在iframe元素上面
3.JavaScript模擬一個(gè)select菜單不使用系統(tǒng)默認(rèn)的select //我感覺這個(gè)操作起來比較麻煩，效率也不高
第二種方法是大家比較認(rèn)可的，原理是div直接蓋不住select 但是div可以蓋iframe，而iframe可以蓋select, 所以，把一個(gè)iframe來當(dāng)作div的底，這個(gè)div就可以蓋住select了，我經(jīng)過實(shí)踐，發(fā)現(xiàn)還是不那么好用，下面在改進(jìn)的基礎(chǔ)上做了自己的方法，分享如下：
------------------------------------------------------------------------------
我的解決方法：Jquery+css
第一步：到網(wǎng)站http://jquery.com/上下載jquery-1.3.2.min.js文件，整個(gè)工程引用該文件。
即將<script type="text/javascript" language="javascript" src="jquery-1.3.2.min.js"> </script>加到頁面<head></head>中，注意src的路徑隨情況而變。

第二步：具體實(shí)現(xiàn)代碼

代碼

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">機(jī)構(gòu)管理</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">車輛監(jiān)控</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">運(yùn)行管理</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樣式，實(shí)現(xiàn)你想要的頁面的樣式總結(jié)：這個(gè)方法是從整個(gè)項(xiàng)目工程優(yōu)化，CSS樣式綜合方面考慮的結(jié)果，能兼容所有的瀏覽器，方法也簡單明了，引用起來比較方便。如果有朋友想采納，不明白的地方可以給我留言。

如對本文有疑問，請?zhí)峤坏浇涣髡搲?，廣大熱心網(wǎng)友會為你解答??！點(diǎn)擊進(jìn)入論壇