<!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事件由於事件冒泡也出發了。先消失在出現的情況。
*/
$("#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}
</風格>
</頭>
<正文>
<ul id="mainNav">
<li類別=“項目”>
<span><strong>新聞</strong></span>
<ul>
<li></li>
<li></li>
<li></li>
</ul>
</li>
<li類別=“項目”>
<span> <strong>產品</strong></span>
<ul>
<li></li>
<li></li>
<li></li>
<li></li>
</ul>
</li>
<li類別=“項目”>
<span><strong>公司</strong></span>
<ul>
<li></li>
<li></li>
<li></li>
<li></li>
</ul>
</li>
</ul>
</正文>
</html>
-