2级下拉菜单中CSS兼容和JS事件冒泡问题

作者：Eve Cole 更新时间：2025-01-13 09:12:58

<!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">
<头>
<title>无标题文档</title>
<meta http-equiv="Content-Type" content="text/html; charset=gb2312" />
<脚本语言=“javaScript”类型=“text/Javascript”src=“jquery/jquery.js”></脚本>
<脚本类型=“文本/javascript”>
$(函数(){

/* $("#mainNav .item").mouSEOver(function() {
var $ul = $(this).find("ul");
$ul.slideDown(500)

})

$("#mainNav .item").mouseout(function () {
var $ul = $(this).find("ul");
$ul.slideUp(500);
})*/
/* 当鼠标从SPAN中一出来时触发了mouseout事件由于事件冒泡也出发了。item的onmouseout事件二级菜单消失，但此时又移入了item又触发了mouseover事件所以又显示。就会出现先消失在出现的情况。
*/

$("#mainNav .item").hover(
功能（） {
var $ul = $(this).find("ul");
$ul.slideDown(500);
},
功能（） {
var $ul = $(this).find("ul");
$ul.slideUp(500);
}
）

/*
$("#mainNav .item").each(function(){
var $thisItem = $(this);

$thisItem.悬停(
功能（） {
var $thisUl = $thisItem.find("ul");
//$thisUl.slideToggle(500);
$thisUl.slideDown(500);
},
功能（）{
var $thisUl = $thisItem.find("ul");
$thisUl.slideUp(500)
}
）；

});
*/

/* $("#mainNav .item span").mouseover(function() {
var $ul = $(this).next();
$ul.show()
})

$("#mainNav .item").mouseout(function () {
var $ul = $(this).find("ul")
$ul.hide();
})

*/

})
//http://www.happinesz.cn/archives/1020/

</脚本>

<样式类型=“文本/CSS”>
正文{ 边距:10 自动;填充：0；字体大小：14px；}
ul,li{ 边距:0;填充：0}

#mainNav{ list-style-type:none}/*在IE中给ul设置了list-style-type粘贴到所有子里中，FF中只应用到1级的里*/
#mainNav li.item { float:left;左边距：50px；宽度：80px； *显示：内嵌； /*对于 ie 6*/ }
#mainNav li.item span{ text-align:center;显示：块；宽度：98%；边框：1px 实心#000；}
#mainNav li.item ul{list-style-type:none;}/*FF需要重新给ul设置list-style-type*/
#mainNav li.item ul{ 显示：无；背景颜色：#CCC}

div.test{ 高度:30px;宽度：50px；左边距：50px；边框：1px实线#ccc}
</风格>
</头>
<正文>

</正文>
</html>