多级下来菜单被select挡住的有关问题
日期：2014-05-17 浏览次数：20616 次
多级下来菜单被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;}
网上找的一个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;}
免责声明： 本文仅代表作者个人观点，与爱易网无关。其原创性以及文中陈述文字和内容未经本站证实，对本文以及其中全部或者部分内容、文字的真实性、完整性、及时性本站不作任何保证或承诺，请读者仅作参考，并请自行核实相关内容。
