我找到一段js,实现在IE6下拉菜单效果,是网上典型的一个例子。但是,鼠标一离开主菜单,下拉子菜单就消失了。对于js,我一知半解,望js高手帮我看看,问题在哪里,怎么修改js,或者还是我的css写的有问题?望指教,感谢了,先。(该css下拉菜单在IE7以上和其他浏览器均完美支持)
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html xmlns="http://www.w3.org/1999/xhtml">
<head>
<meta http-equiv="Content-Type" content="text/html; charset=gb2312" />
<title>一个很不错的下拉导航菜单</title><style type="text/css">
<!--
#navParent {position:absolute;margin:0 auto 0 auto !important;background-color:#3591da;height: 29px;width: auto;font-size:12px;}
#navParent ul {text-align:center;padding: 0;margin: 0;list-style: none;}
#navParent ul a{color:#ffffff;font-size:12px;}
#navParent li {float: left;width: 120px;border-right:2px solid #fff; position: relative;}
#navParent li ul {display: none; position:absolute; left:0px}
#navParent li ul li{width:230px;text-align:left;}
#navParent li:hover ul, li.over ul {display: block;}
#navParent ul li a {background-color:#3591da;padding:7px;border-bottom:1px white solid;text-decoration: none;display:block;font-weight: bolder;}
#navParent ul li a:hover{background-color:#076bb9;}
-->
</style>
<script language="javascript">
stuHover = function() {
var cssRule;
var newSelector;
for (var i = 0; i < document.styleSheets.length; i++)
for (var x = 0; x < document.styleSheets[i].rules.length ; x++)
{
cssRule = document.styleSheets[i].rules[x];
if (cssRule.selectorText.indexOf("LI:hover") != -1)
{
newSelector = cssRule.selectorText.replace(/LI:hover/gi, "LI.iehover");
document.styleSheets[i].addRule(newSelector , cssRule.style.cssText);
}
}
var getElm = document.getElementById("navParent").getElementsByTagName("LI");
for (var i=0; i<getElm.length; i++) {
getElm[i].onmouseover=function() {
this.className+=" iehover";
}
getElm[i].onmouseout=function() {
this.className=this.className.replace(new RegExp(" iehover\\b"), "");
}
}
}
if (window.attachEvent) window.attachEvent("onload", stuHover);
</script></head><body><div id="navParent">
<ul>
<li><a href="">Computers</a>
<ul>
<li><a href="">Computer Parts</a></li>
<li><a href="">USB Flash Memory</a></li>
<li><a href="">Batteries</a></li>
<li><a href="">USB data cable</a></li>
<li><a href="">Computer Hardware</a></li>
<li><a href="">Earphone</a></li>
<li><a href="">Remote Storage</a></li>
</ul>
</li> <li><a href="">Electronics </a>
<ul>
<li><a href="">GPS</a></li>
<li><a href="">Bluetooth Carkits</a></li>
<li><a href="">Cell phones</a></li>
<li><a href="">MP3/MP4</a></li>
<li><a href="">Digital Cameras</a></li>
</ul>
</li>
<li><a href="">Toys</a>
<ul>
<li><a href="">Games</a></li>
<li><a href="">Remote Control Toys</a></li>
<li><a href="">Toys by Ages</a></li>
</ul>
</li>
<li><a href="">Cameras</a>
<ul>
<li><a href="">Digital Cameras</a></li>
<li><a href="">Camcorders</a></li>
<li><a href="">Batteries</a></li>
<li><a href="">Memory Cards</a></li>
</ul>
</li>
<li><a href="">CellPhones </a>
<ul>
<li><a href="">Free Cellphones with Plans</a></li>
<li><a href="">Refurbished cellphones</a></li>
<li><a href="">Prepaid Refills</a></li>
<li><a href="">Free Ringtones</a></li>
<li><a href="">Cellphone Accessories</a></li>
</ul>
</li>
<li><a href="">Batteries </a>
<ul>
<li><a href="">Cellphone Batteries</a></li>
<li><a href="">Laptop Batteries</a></li>
<li><a href="">Digital Camera Batteries</a></li>
<li><a href="">Camcorder Batteries</a></li>
<li><a href="">PDA Batteries</a></li>
<li><a href="">Ipod/MP3 Batteries</a></li>
<li><a href="">Others</a></li>
</ul>
</li>
<li><a href="">Video Games</a>
<ul>
<li><a href="">Wii</a></li>
<li><a href="">Xbox 360</a></li>
<li><a href="">PlayStation 2/PS 2</a></li>
<li><a href="">Nintendo DS</a></li>
<li><a href="">PlayStation 3/PS 3</a></li>
<li><a href="">PSP</a></li>
<li><a href="">PC games</a></li>
<li><a href="">Game Console</a></li>
<li><a href="">Accessories</a></li>
</ul>
</li>
</ul>
</div></body>
</html>
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html xmlns="http://www.w3.org/1999/xhtml">
<head>
<meta http-equiv="Content-Type" content="text/html; charset=gb2312" />
<title>一个很不错的下拉导航菜单</title><style type="text/css">
<!--
#navParent {position:absolute;margin:0 auto 0 auto !important;background-color:#3591da;height: 29px;width: auto;font-size:12px;}
#navParent ul {text-align:center;padding: 0;margin: 0;list-style: none;}
#navParent ul a{color:#ffffff;font-size:12px;}
#navParent li {float: left;width: 120px;border-right:2px solid #fff; position: relative;}
#navParent li ul {display: none; position:absolute; left:0px}
#navParent li ul li{width:230px;text-align:left;}
#navParent li:hover ul, li.over ul {display: block;}
#navParent ul li a {background-color:#3591da;padding:7px;border-bottom:1px white solid;text-decoration: none;display:block;font-weight: bolder;}
#navParent ul li a:hover{background-color:#076bb9;}
-->
</style>
<script language="javascript">
stuHover = function() {
var cssRule;
var newSelector;
for (var i = 0; i < document.styleSheets.length; i++)
for (var x = 0; x < document.styleSheets[i].rules.length ; x++)
{
cssRule = document.styleSheets[i].rules[x];
if (cssRule.selectorText.indexOf("LI:hover") != -1)
{
newSelector = cssRule.selectorText.replace(/LI:hover/gi, "LI.iehover");
document.styleSheets[i].addRule(newSelector , cssRule.style.cssText);
}
}
var getElm = document.getElementById("navParent").getElementsByTagName("LI");
for (var i=0; i<getElm.length; i++) {
getElm[i].onmouseover=function() {
this.className+=" iehover";
}
getElm[i].onmouseout=function() {
this.className=this.className.replace(new RegExp(" iehover\\b"), "");
}
}
}
if (window.attachEvent) window.attachEvent("onload", stuHover);
</script></head><body><div id="navParent">
<ul>
<li><a href="">Computers</a>
<ul>
<li><a href="">Computer Parts</a></li>
<li><a href="">USB Flash Memory</a></li>
<li><a href="">Batteries</a></li>
<li><a href="">USB data cable</a></li>
<li><a href="">Computer Hardware</a></li>
<li><a href="">Earphone</a></li>
<li><a href="">Remote Storage</a></li>
</ul>
</li> <li><a href="">Electronics </a>
<ul>
<li><a href="">GPS</a></li>
<li><a href="">Bluetooth Carkits</a></li>
<li><a href="">Cell phones</a></li>
<li><a href="">MP3/MP4</a></li>
<li><a href="">Digital Cameras</a></li>
</ul>
</li>
<li><a href="">Toys</a>
<ul>
<li><a href="">Games</a></li>
<li><a href="">Remote Control Toys</a></li>
<li><a href="">Toys by Ages</a></li>
</ul>
</li>
<li><a href="">Cameras</a>
<ul>
<li><a href="">Digital Cameras</a></li>
<li><a href="">Camcorders</a></li>
<li><a href="">Batteries</a></li>
<li><a href="">Memory Cards</a></li>
</ul>
</li>
<li><a href="">CellPhones </a>
<ul>
<li><a href="">Free Cellphones with Plans</a></li>
<li><a href="">Refurbished cellphones</a></li>
<li><a href="">Prepaid Refills</a></li>
<li><a href="">Free Ringtones</a></li>
<li><a href="">Cellphone Accessories</a></li>
</ul>
</li>
<li><a href="">Batteries </a>
<ul>
<li><a href="">Cellphone Batteries</a></li>
<li><a href="">Laptop Batteries</a></li>
<li><a href="">Digital Camera Batteries</a></li>
<li><a href="">Camcorder Batteries</a></li>
<li><a href="">PDA Batteries</a></li>
<li><a href="">Ipod/MP3 Batteries</a></li>
<li><a href="">Others</a></li>
</ul>
</li>
<li><a href="">Video Games</a>
<ul>
<li><a href="">Wii</a></li>
<li><a href="">Xbox 360</a></li>
<li><a href="">PlayStation 2/PS 2</a></li>
<li><a href="">Nintendo DS</a></li>
<li><a href="">PlayStation 3/PS 3</a></li>
<li><a href="">PSP</a></li>
<li><a href="">PC games</a></li>
<li><a href="">Game Console</a></li>
<li><a href="">Accessories</a></li>
</ul>
</li>
</ul>
</div></body>
</html>
<html xmlns="http://www.w3.org/1999/xhtml">
<head>
<meta http-equiv="Content-Type" content="text/html; charset=gb2312" />
<title>一个很不错的下拉导航菜单</title><style type="text/css">
<!--
#navParent {position:absolute;margin:0 auto 0 auto !important;background-color:#3591da;height: 29px;width: auto;font-size:12px;}
#navParent ul {text-align:center;padding: 0;margin: 0;list-style: none;}
#navParent ul a{color:#ffffff;font-size:12px;}
#navParent li {float: left;width: 120px;border-right:2px solid #fff; position: relative;}
#navParent li ul {display: none; position:absolute; left:0px; }
#navParent li ul li{width:230px;text-align:left;}/* #navParent li:hover ul, li.over ul {display: block;} */
#navParent ul li a {background-color:#3591da;
padding:7px;
border-bottom:1px white solid;text-decoration: none;
display:block;font-weight: bolder;
}
#navParent ul li ul a {background-color:#3591da; padding:0px; width:100%; line-height:25px; height:25px; padding-left:7px; }
#navParent ul li a:hover{background-color:#076bb9;}
-->
</style>
<script src="http://ajax.googleapis.com/ajax/libs/jquery/1.4.2/jquery.min.js"></script>
</head><body>
<div id="navParent">
<ul>
<li><a href="">Computers</a>
<ul>
<li><a href="">Computer Parts</a></li>
<li><a href="">USB Flash Memory</a></li>
<li><a href="">Batteries</a></li>
<li><a href="">USB data cable</a></li>
<li><a href="">Computer Hardware</a></li>
<li><a href="">Earphone</a></li>
<li><a href="">Remote Storage</a></li>
</ul>
</li> <li><a href="">Electronics </a>
<ul>
<li><a href="">GPS</a></li>
<li><a href="">Bluetooth Carkits</a></li>
<li><a href="">Cell phones</a></li>
<li><a href="">MP3/MP4</a></li>
<li><a href="">Digital Cameras</a></li>
</ul>
</li>
<li><a href="">Toys</a>
<ul>
<li><a href="">Games</a></li>
<li><a href="">Remote Control Toys</a></li>
<li><a href="">Toys by Ages</a></li>
</ul>
</li>
<li><a href="">Cameras</a>
<ul>
<li><a href="">Digital Cameras</a></li>
<li><a href="">Camcorders</a></li>
<li><a href="">Batteries</a></li>
<li><a href="">Memory Cards</a></li>
</ul>
</li>
<li><a href="">CellPhones </a>
<ul>
<li><a href="">Free Cellphones with Plans</a></li>
<li><a href="">Refurbished cellphones</a></li>
<li><a href="">Prepaid Refills</a></li>
<li><a href="">Free Ringtones</a></li>
<li><a href="">Cellphone Accessories</a></li>
</ul>
</li>
<li><a href="">Batteries </a>
<ul>
<li><a href="">Cellphone Batteries</a></li>
<li><a href="">Laptop Batteries</a></li>
<li><a href="">Digital Camera Batteries</a></li>
<li><a href="">Camcorder Batteries</a></li>
<li><a href="">PDA Batteries</a></li>
<li><a href="">Ipod/MP3 Batteries</a></li>
<li><a href="">Others</a></li>
</ul>
</li>
<li><a href="">Video Games</a>
<ul>
<li><a href="">Wii</a></li>
<li><a href="">Xbox 360</a></li>
<li><a href="">PlayStation 2/PS 2</a></li>
<li><a href="">Nintendo DS</a></li>
<li><a href="">PlayStation 3/PS 3</a></li>
<li><a href="">PSP</a></li>
<li><a href="">PC games</a></li>
<li><a href="">Game Console</a></li>
<li><a href="">Accessories</a></li>
</ul>
</li>
</ul>
</div>
<script>
top.name='ok';
$('#navParent>ul>li').hover(
function(){
$(this).find('ul').show()
},
function(){
$(this).find('ul').hide()
}
);
</script>
</body>
</html>
http://bbs.csdn.net/topics/390364321?page=1#post-393650226