<!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>
<тип сценария="текст/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事件由于事件冒泡也出发了.item的onmouseout事件二级菜单消失,但此时又移入了item又触发了mouseov э-э-э-э, это не так, как кажется на первый взгляд.
*/
$("#mainNav .item").hover(
функция() {
var $ul = $(this).find("ul");
$ul.slideDown(500);
},
функция () {
var $ul = $(this).find("ul");
$ul.slideUp(500);
}
)
/*
$("#mainNav .item").each(function(){
вар $thisItem = $(это);
$thisItem.hover(
функция () {
вар $thisUl = $thisItem.find("ul");
//$thisUl.slideToggle(500);
$thisUl.slideDown(500);
},
функция(){
вар $thisUl = $thisItem.find("ul");
$thisUl.slideUp(500)
}
);
});
*/
/* $("#mainNav .item span").mouseover(function() {
вар $ul = $(this).next();
$ул.шоу()
})
$("#mainNav .item").mouseout(function () {
var $ul = $(this).find("ul")
$ул.скрыть();
})
*/
})
//http://www.happinesz.cn/archives/1020/
</скрипт>
<style type="text/CSS">
тело {маржа: 10 авто; дополнение: 0; размер шрифта: 14 пикселей;}
ul,li{маржа:0; дополнение: 0}
#mainNav{ list-style-type:none}/*在IE中给ul设置了list-style-type会将应用到所有子li中,FF中只会应用到1级的li*/
#mainNav li.item { float:left; поле слева: 50 пикселей; ширина: 80 пикселей; *дисплей:встроенный; /*например, 6*/ }
#mainNav li.item span { text-align: center; дисплей: блок; ширина: 98%; граница: 1 пиксель, сплошной # 000;}
#mainNav li.item ul{list-style-type:none;}/*FF需要重新给ul设置list-style-type*/
#mainNav li.item ul { display: none; цвет фона:#CCC}
div.test {высота: 30 пикселей; ширина: 50 пикселей; поле слева: 50 пикселей; граница: сплошной 1 пиксель #ccc}
</стиль>
</голова>
<тело>
<ul id="mainNav">
<li класс="элемент">
<span><strong>Старт</strong></span>
<ул>
<ли></ли>
<ли></ли>
<ли></ли>
</ul>
</li>
<li класс="элемент">
<span> <strong>产品</strong></span>
<ул>
<ли></ли>
<ли></ли>
<ли></ли>
<ли></ли>
</ul>
</li>
<li класс="элемент">
<span><strong>公司</strong></span>
<ул>
<ли></ли>
<ли></ли>
<ли></ли>
<ли></ли>
</ul>
</li>
</ul>
</тело>
</html>
-