http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd ">
http://www.w3.org/1999/xhtml ">
<머리>
无标题文档 <스크립트 유형="텍스트/자바스크립트">
$(함수 () {
/* $("#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事件に级菜单消失，但此时又移入了item又触发了mouseover事件所以又显示ude来。这时就会는 先消失에서 来的情况을 내보냅니다.
*/
$("#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/
<스타일 유형="텍스트/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}
<본문>
