多级下来菜单被select挡住的有关问题

多级下来菜单被select挡住的问题
网上找的一个CSS的多级菜单代码：
http://www.52hai.com/2005/showlog.asp?cat_id=5&log_id=2286

简化了一下，如下：
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Strict//EN " "http://www.w3.org/TR/xhtml1/DTD/xhtml1-strict.dtd ">
<html xmlns= "http://www.w3.org/1999/xhtml " xml:lang= "en " lang= "en ">
<head>
<title> </title>
<meta http-equiv= "Content-Type " content= "text/html; charset=utf-8 ">
<script language= "javascript ">
// This function is used for the Suckerfish (flyout) menus

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>
<style type= "text/css ">
body {
margin: 30;
padding: 0;
font-family: "Lucida Grande ", Arial, Verdana, sans-serif;
font-size: .7em;
color: #444;
}

ul#nav {
margin: 0 ;
padding: 0;
list-style: none;
background:#006699;
border:1px #eee solid;
}

#nav li {
display: block;
float: left;
}
#nav li a {
display: block;
color: #fff;
text-decoration: none;
padding: 3px 27px 3px 14px;
border-left: 1px solid #FFF;
border-bottom: 0;
background: url(img/arrow-down.gif) right 55% no-repeat;
}
#nav li li a{ border:0;}

/*
SON OF SUCKERFISH DROPDOWNS

See http://www.htmldog.com/articles/suckerfish/dropdowns/
--------------------- */

/* 2nd and 3rd level menus */
#nav ul {
position: absolute;
z-index: 99;
left: -999em;
margin: 0px 0 0 -1px;
padding: 0;
width: 14.4em;
w\idth: 13.9em;
height: auto;
background:#006699;
border:#fff 1px solid;
}

/* 3rd level menus only */
#nav ul ul {
margin: -1.3em 0 0 12em;
}

/* 2nd and 3rd level menus */
#nav li li {
padding: 2px 1em 2px 0;
width: 13em;
border-bottom: 1px solid #fff;
}

/* 2nd and 3rd level menus */
#nav ul a {
width: 13em;
w\idth: 9em;
border-right: 0;
}
/* 防止全部都出来 */
#nav li:hover ul ul, #nav li:hover ul ul ul, #nav li.sfhover ul ul, #nav li.sfhover ul ul ul {
left: -999em;
}

/* This "unhides " the sub-menus (left: -999em is what hides them) */
#nav li:hover ul, #nav li li:hover ul, #nav li li li:hover ul, #nav li.sfhover ul, #nav li li.sfhover ul, #nav li li li.sfhover ul {
left: auto;
}

#nav li:hover, #nav li.sfhover {
}

/* 2nd and 3rd level menus */
#nav ul li:hover, #nav ul ul li:hover, #nav ul li.sfhover, #nav ul ul li.sfhover {

}

/* 2nd and 3rd level menus */
#nav ul li a, #nav ul ul li a {
background:none;
}
#nav ul li a:hover, #nav ul ul li a:hover {

}
/* 2nd level menus only */
#nav a.sub {
background: url(img/arrow-right.gif) right 52% no-repeat;
}
/*
P.I.E. FLOAT CLEARING
See http://www.positioniseverything.net/easyclearing.html
--------------------- */

.clearfix:after {
content: ". ";
clear: both;
height: 0;

visibility: hidden;
display: block;
}
.clearfix {
display: inline-block; /* Fixes IE/Mac */
}
/* Hides from IE-mac \*/
* html .clearfix {height: 1%;}
.clearfix {display: block;}
/* End hide from IE-mac */

</style>
</head>
<body>



<ul id= "nav " class= "clearfix ">
<li> <a href= "http://bmb.cameronmoll.be/suppliers/ "> Research </a>
<ul>
<li> <a href= "# " class= "sub "> Menu Item 1 </a>
<ul>
<li> <a href= "# "> Sub-menu Item 1 </a> </li>
<li> <a href= "# "> Sub-menu Item 2 </a> </li>
<li> <a href= "# "> Sub-menu Item 3 </a> </li>
<li> <a href= "# "> Sub-menu Item 4 </a> </li>
</ul>
</li>
</ul>
</li>

</ul>
<br>
<select size= "1 " name= "D1 " style= "width:200px; z-index:1; "> </select>
</body>
</html>

个人理解如下：
每个LI添加了鼠标响应事件，添加或者去掉sfhover样式。

控制下一级菜单出现的主要代码是：
#nav li:hover ul ul, #nav li:hover ul ul ul, #nav li.sfhover ul ul, #nav li.sfhover ul ul ul {
left: -999em;
}

#nav li:hover ul, #nav li li:hover ul, #nav li li li:hover ul, #nav li.sfhover ul, #nav li li.sfhover ul, #nav li li li.sfhover ul {
left: auto;
}

前面一个是防止下一级和下下一级同时都出现，后面一个是显现出下一级菜单。

***********************
问题如下：
由于IE的BUG，挡不住select。

是想不动select，不设置它的可视。

网上看用iframe作载体或者用object，但是由于菜单的位置是不固定的，怎么设置iframe或者object的位置宽度等呢。
寻求解决办法。

[解决办法]
select是窗体级元素

较好的解决办法是用模拟的select替代，例如用组合div仿select
[解决办法]
用浮动层来实现菜单的话,是必然会被select挡住的.
可以试试楼上的解决办法,要不然就显示浮动层的时候,把会将层挡住的select隐藏。
[解决办法]
暂时隐藏select
[解决办法]
没什么特别好的办法,上面说的可行
[解决办法]
参考：
http://community.csdn.net/Expert/topic/5554/5554283.xml?temp=.318844
DEMO:
http://www.v-ec.com/dh20156/code/dhatv/
下载：
http://www.v-ec.com/dh20156/code/dhatv/dhatv.rar
[解决办法]
用iframe或object很难设置其高度来满足select或浮动菜单的显示，还是比较麻烦的
看来还是模拟吧，DIV

多级下来菜单被select挡住的有关问题

热点推荐