网页下拉菜单被select框遮盖的解决方法
导航的下拉菜单被接近导航的select框遮住了,这个环境只在IE6环境下产生,属于IE6的一个缺陷,先不管何等悔恨IE的各种不是吧,此刻网上较量风行的要领今朝大抵有三种: 1.点击下拉菜单潜匿select //我认为这个要领不太适用 第二种要领是各人较量承认的,道理是div直接盖不住select 可是div可以盖iframe,而iframe可以盖select, 以是,把一个iframe来看成div的底, 这个div就可以挡住select了,我颠末实践,发明照旧不那么好用,下面在改造的基本上做了本身的要领,分享如下: 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> 源码: Copy to Clipboard引用的内容:[www.veryhuo.com] <div class="loadmenu"><ul class="menu" id="navmenu"> <li><a href="http://www.veryhuo.com/" class="libg">猛火首页</a> <ul> <li><a href="">网站运营</a></li><script>getIE();</script> <li><a href="">WEB 计划</a></li><script>getIE();</script> </ul> </li> <li><a href="" class="libg">收集编程</a> <ul> <li><a href="">操纵体系</a></li><script>getIE();</script> <li><a href="">源码下载</a></li><script>getIE();</script> <li><a href="">免费资源</a></li><script>getIE();</script> </ul> </li> <li><a class="libg" href="">站长论坛</a> </li> </ul> </div> CSS样式: Copy to Clipboard引用的内容:[www.veryhuo.com] #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样式综合方面思量的功效,能兼容全部的赏识器,要领也简朴明白,引用起来较量利便。假若有伴侣想采用,不大白的处所可以给我留言。 (编辑:河北网) 【声明】本站内容均来自网络,其相关言论仅代表作者个人观点,不代表本站立场。若无意侵犯到您的权利,请及时与联系站长删除相关内容! |