|
由于通常使用的下拉菜单使用的是层来制作，所以通常被优先级更高的下拉框遮挡住，为了解决这个问题，我们需要优先级更高的IFrame，以下是源代码 <html> <head> <meta http-equiv="Content-Type" content="text/html; charset=gb2312"> <title>demo</title> <style type="text/css"> <!-- body table{ font-family: Arial, Helvetica, sans-serif; font-size: 11px; } .menu_iframe{position:absolute; visibility:inherit; top:0px; left:0px; width:120px; z-index:-1; filter: Alpha(Opacity=100); background:#000000;} #nav, #nav ul { float:right; /* 菜单总体水平位置 */ list-style:none; line-height:22px; /* 一级菜单高 */ background: #eee; /* 所有菜单移出色 */ font-weight: bold; padding:0px; margin:0px; border:1px solid #ccc; border-right: 0px; } #nav a { width:120px; display:block; color:#333; text-decoration:none; text-align:center; border-right:1px solid #CCC; } #nav a:hover{color:#000;} /* 所有 a:hover 字体样式 */ #nav a.selected{background:url(images/arrow.gif) no-repeat right 50%;} /* 下拉图标 */ #nav li {float:left;} #nav li ul { /* 二级弹出位 */ position:absolute; margin:0px 0px 0px -1px; padding:0; left:-9999em; width:120px; font-weight:normal; } #nav li li {width:120px;} /* 二级菜单宽 */ #nav li ul a { width:120px; /* 二级菜单宽 */ padding:0px 12px; line-height:24px; /* 二级菜单高 */ border-top:1px solid #CCC; text-align:left; } #nav li:hover ul ul,#nav li.sfhover ul ul{left:-9999em;} #nav li:hover ul,#nav li li:hover ul,#nav li.sfhover ul, #nav li li.sfhover ul{left:auto;} /* 所有弹出菜单自动左边距 */ #nav li:hover, #nav li.sfhover {background:#ccc;} /* 所有悬浮样式 */ --> </style> <script type="text/javascript"><!--//--><![CDATA[//><!-- 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"), ""); } } } window.onload=sfHover; //--><!]]></script> </head> <body> <table> <tr> <td> <ul id="nav"> <li><a href="#" class="selected">咖啡堂</a> <ul> <li><a href="#">45it.com</a></li> <li><a href="#">45it.com</a></li> <li><a href="#">管理管理员</a></li> <li><a href="#">管理员日志列表</a></li> <iframe class="menu_iframe"></iframe> </ul> </li> </ul> </td> </tr> <tr> <td> <select name="select" style="float:right"> <option value="dd">ddd</option> <option value="ddd">ddd</option> </select> </td> </tr> </table> </body> </html> 以上转自网络，经本人实践应用，确认有效，故与大家分享。 ps：此段 <ul> <li><a href="#">45it.com</a></li> <li><a href="#">45it.com</a></li> <li><a href="#">管理管理员</a></li> <li><a href="#">管理员日志列表</a></li> <iframe class="menu_iframe"></iframe> </ul> 应更改为： <ul> <iframe class="menu_iframe"></iframe> <li><a href="#">45it.com</a></li> <li><a href="#">45it.com</a></li> <li><a href="#">管理管理员</a></li> <li><a href="#">管理员日志列表</a></li> </ul> 否则在ie下对非js编写的下拉hover样式有影响。 |
