难题：用css做的下拉菜单被<select></select>遮挡了！
听说是IE的一个问题，请问可不可以做一个仿select的，只要不遮挡菜单就好了。
如果可以修改改代码更好，代码如下:(都是从网下找下来的)
<style type= "text/css ">
<!--
@import "dhtml-horiz.css ";
-->
document{
overflow:scroll;overflow-x:hidden;
}
body {
margin: 0;
padding: 0px;
background: #FFF;
color: #666;
}
h1 {
font: bold 16px Arial, Helvetica, sans-serif;
}
p {
font: 11px Arial, Helvetica, sans-serif;
}
a {
color: #900;
text-decoration: none;
}
a:hover {
background: #900;
color: #FFF;
}
/*CSS Code for Menu Begin:*/
/* Root = Horizontal, Secondary = Vertical */
ul#navmenu {
margin: 0;
border: 0 none;
padding: 0;
width: 1024; /*For KHTML*/
list-style: none;
height: 24px;
}
ul#navmenu li {
margin: 0;
border: 0 none;
padding: 0;
float: left; /*For Gecko*/
display: inline;
list-style: none;
position: relative;
height: 24px;
}
ul#navmenu ul {
margin: 0;
border: 0 none;
padding: 0;
width: 160px;
list-style: none;
display: none;
position: absolute;
top: 24px;
left: 0;
}
ul#navmenu ul li {
float: none; /*For Gecko*/
display: block !important;
display: inline; /*For IE*/
}
/* Root Menu */
ul#navmenu a {
border: 1px solid #FFF;
border-right-color: #CCC;
border-bottom-color: #CCC;
padding: 0 6px;
float: none !important; /*For Opera*/
float: left; /*For IE*/
display: block;
background: #EEE;
color: #666;
font: bold 10px/22px Verdana, Arial, Helvetica, sans-serif;
FONT-WEIGHT: bold; FONT-SIZE: 12px;
text-decoration: none;
height: auto !important;
height: 1%; /*For IE*/
}
/* Root Menu Hover Persistence */
ul#navmenu a:hover,
ul#navmenu li:hover a,
ul#navmenu li.iehover a {
background: #CCC;
color: #FFF;
}
/* 2nd Menu */
ul#navmenu li:hover li a,
ul#navmenu li.iehover li a {
float: none;
background: #EEE;
color: #666;
}
/* 2nd Menu Hover Persistence */
ul#navmenu li:hover li a:hover,
ul#navmenu li:hover li:hover a,
ul#navmenu li.iehover li a:hover,
ul#navmenu li.iehover li.iehover a {
background: #CCC;
color: #FFF;
}
/* 3rd Menu */
ul#navmenu li:hover li:hover li a,
ul#navmenu li.iehover li.iehover li a {
background: #EEE;
color: #666;
}
/* 3rd Menu Hover Persistence */
ul#navmenu li:hover li:hover li a:hover,
ul#navmenu li:hover li:hover li:hover a,
ul#navmenu li.iehover li.iehover li a:hover,
ul#navmenu li.iehover li.iehover li.iehover a {
background: #CCC;
color: #FFF;
}
/* 4th Menu */
ul#navmenu li:hover li:hover li:hover li a,
ul#navmenu li.iehover li.iehover li.iehover li a {
background: #EEE;
color: #666;
}
/* 4th Menu Hover */
ul#navmenu li:hover li:hover li:hover li a:hover,
ul#navmenu li.iehover li.iehover li.iehover li a:hover {
background: #CCC;
color: #FFF;
}
ul#navmenu ul ul,
ul#navmenu ul ul ul {
display: none;
position: absolute;
top: 0;
left: 160px;
}
/* Do Not Move - Must Come Before display:block for Gecko */
ul#navmenu li:hover ul ul,
ul#navmenu li:hover ul ul ul,
ul#navmenu li.iehover ul ul,
ul#navmenu li.iehover ul ul ul {
display: none;
}
ul#navmenu li:hover ul,
ul#navmenu ul li:hover ul,
ul#navmenu ul ul li:hover ul,
ul#navmenu li.iehover ul,
ul#navmenu ul li.iehover ul,
ul#navmenu ul ul li.iehover ul {
display: block;
}
</style>
<script type= "text/JavaScript ">
navHover = function() {
var lis = document.getElementById( "navmenu ").getElementsByTagName( "LI ");
for (var i=0; i <lis.length; i++) {
lis[i].onmouseover=function() {
this.className+= " iehover ";
}
lis[i].onmouseout=function() {
this.className=this.className.replace(new RegExp( " iehover\\b "), " ");
}
}
}
if (window.attachEvent) window.attachEvent( "onload ", navHover);
</script>
[解决办法]
1.可以在菜单里加一个iframe,把菜单项写到iframe里.因为iframe可以在select上面.
2.可以在菜单出来时,隐藏select.
都可以.
[解决办法]
<...... onmouseover= "document.getElementById( 'k ').style.display= 'none '; " onmouseout= "document.getElementById( 'k ').style.display= ' '; ">
<select id= "k "> </select>
[解决办法]
IE6.0以下的版本好像都有这个问题，在FF、IE7、Opera下不会有问题，这是因为window系统本身的控件问题。没有办法避免
只有在层显示的时候，让select隐藏
