<!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" />
<script 언어="javaScript" type="text/Javascript" src="jquery/jquery.js"></script>
<스크립트 유형="텍스트/자바스크립트">
$(함수 () {
/* $("#mainNav .item").mouSEOver(function() {
var $ul = $(this).find("ul");
$ul.slideDown(500)
})
$("#mainNav .item").mouseout(함수 () {
var $ul = $(this).find("ul");
$ul.slideUp(500);
})*/
/*当鼠标从SPAN中一件来时触发了mouseout事件由于事件冒泡也流发了.item的onmouseout事件two级菜单消失，但此时又移入了item又触发了mouse over事件所以又显示出来。
*/
$("#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.hover(
기능 () {
var $thisUl = $thisItem.find("ul");
//$thisUl.slideToggle(500);
$thisUl.slideDown(500);
},
기능(){
var $thisUl = $thisItem.find("ul");
$thisUl.slideUp(500)
}
);
});
*/
/* $("#mainNav .item 범위").mouseover(function() {
var $ul = $(this).next();
$ul.show()
})
$("#mainNav .item").mouseout(함수 () {
var $ul = $(this).find("ul")
$ul.hide();
})
*/
})
//http://www.happinesz.cn/archives/1020/
</script>
<스타일 유형="텍스트/CSS">
body{ 여백:10 자동; 패딩:0; 글꼴 크기:14px;}
ul,li{ 여백:0; 패딩:0}
에디토리얼
#mainNav li.item { float:left; 여백-왼쪽:50px; 너비:80px; *디스플레이:인라인; /*즉, 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}
</style>
</head>
<본문>
<ul id="mainNav">
<li 클래스="항목">
<span><strong>새로운 소식</strong></span>
<ul>
<리></리>
<리></리>
<리></리>
</ul>
</li>
<li 클래스="항목">
<span> <strong>제품</strong></span>
<ul>
<리></리>
<리></리>
<리></리>
<리></리>
</ul>
</li>
<li 클래스="항목">
<span><strong>공사</strong></span>
<ul>
<리></리>
<리></리>
<리></리>
<리></리>
</ul>
</li>
</ul>
</body>
</html>
-