<!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">
<cabeça>
<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="texto/javascript">
$(função(){
/* $("#mainNav .item").mouSEOver(function() {
var $ul = $(este).find("ul");
$ul.slideDown(500)
})
$("#mainNav.item").mouseout(function() {
var $ul = $(este).find("ul");
$ul.slideUp(500);
})*/
/*当鼠标从SPAN中一出来时触发了mouseout事件由于事件冒泡也出发了.item的onmouseout事件二级菜单消失, 但此时又移入了item又触发了mouseov er.
*/
$("#mainNav.item").hover(
função() {
var $ul = $(este).find("ul");
$ul.slideDown(500);
},
função () {
var $ul = $(este).find("ul");
$ul.slideUp(500);
}
)
/*
$("#mainNav .item").each(function(){
var $esteItem = $(este);
$esteItem.hover(
função () {
var $thisUl = $thisItem.find("ul");
//$thisUl.slideToggle(500);
$thisUl.slideDown(500);
},
função(){
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 = $(este).find("ul")
$ul.hide();
})
*/
})
//http://www.happinesz.cn/archives/1020/
</script>
<style type="texto/CSS">
corpo{ margem:10 automático; preenchimento:0; tamanho da fonte: 14px;}
ul,li{margem:0; preenchimento:0}
#mainNav{ tipo de estilo de lista: nenhum}/*在IE中给ul设置了tipo de estilo de lista会将应用到所有子li中，FF中只会应用到1级的li*/
#mainNav li.item { float:esquerda; margem esquerda:50px; largura:80px; *exibição:inline; /*para ou seja, 6*/ }
#mainNav li.item span{ text-align:center; exibição: bloco; largura:98%;borda:1px sólido #000;}
#mainNav li.item ul{list-style-type:none;}/*FF需要重新给ul设置list-style-type*/
#mainNav li.item ul{ display:none; cor de fundo:#CCC}
div.teste{altura:30px; largura:50px; margem esquerda:50px; borda:1px sólido #ccc}
</estilo>
</head>
<corpo>
<ul id="mainNav">
<li class="item">
<span><strong>新闻</strong></span>
<ul>
<li></li>
<li></li>
<li></li>
</ul>
</li>
<li class="item">
<span> <strong>产品</strong></span>
<ul>
<li></li>
<li></li>
<li></li>
<li></li>
</ul>
</li>
<li class="item">
<span><strong>公司</strong></span>
<ul>
<li></li>
<li></li>
<li></li>
<li></li>
</ul>
</li>
</ul>
</body>
</html>
-