<!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 language="javaScript" type="text/Javascript" src="jquery/jquery.js"></script>
<script type="text/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 から同時に移動すると、イベント冒涜によってマウスアウト イベントが起動され、.item の onmouseout イベントの 2 階メニューが消えましたが、このとき再び 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.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(function () {
var $ul = $(this).find("ul")
$ul.非表示();
})
*/
})
//http://www.happinesz.cn/archives/1020/
</script>
<style type="text/CSS">
body{ マージン:10 自動;パディング:0; フォントサイズ:14px;}
ul,li{マージン:0;パディング:0}
#mainNav{ list-style-type:none}/*IE 内での設定完了 list-style-type 会はすべての子 li に適用され、FF 内のみ 1 層の li に適用されます*/
#mainNav li.item { float:left;マージン左:50px;幅:80ピクセル; *表示:インライン; /*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;幅:50ピクセル;マージン左:50px;境界線:1px 実線 #ccc}
</スタイル>
</head>
<本文>
<ul id="mainNav">
<li class="アイテム">
<span><strong>新闻</strong></span>
<ul>
<li></li>
<li></li>
<li></li>
</ul>
</li>
<li class="アイテム">
<span> <strong>商品</strong></span>
<ul>
<li></li>
<li></li>
<li></li>
<li></li>
</ul>
</li>
<li class="アイテム">
<span><strong>公司</strong></span>
<ul>
<li></li>
<li></li>
<li></li>
<li></li>
</ul>
</li>
</ul>
</body>
</html>
-