lungsur turun tiga peringkat jQuery

Question

Hello cikgu, selepas saya selesai menulis, saya mengalami masalah gelongsor.

Answer 1

.

<gaya>

* {

jidar: 0;

pelapik: 0;

}

.menu {

lebar:

warna latar belakang: # 000000;

jidar: 0 auto;

jejari sempadan: 10px;

warna: #ffffff;

jidar: 1px pepejal #ccc;

jidar atas: 20px;

gaya senarai: tiada;

}

ul li {

lebar: 100px;

tinggi: 30px;

saiz fon: 14

px;saiz fon: 14

teks- jajar: tengah;

apungan: kiri;

sempadan-kanan: 1px pepejal #ffffff;

kursor: penunjuk;

}

.twobox li

;px

.twobox li {

;px

warna latar belakang: #ccc;

warna: #000;

saiz fon: 14px;

garis-tinggi: 30px;

kedudukan: relatif;

sempadan: 0px;

}

.twobox li:hover {

warna: #ffffff;

latar belakang-warna: #000;

}

.tiga {

kedudukan kiri: mutlak;

: px0 ;

}

.tiga li {

lebar: 99px;

tinggi: 30px;

garis-tinggi: 30px;

;

;

;

; gt;

<script type="text/javascript" src="js/jquery-1.7.1.min.js" ></script>

<script>

$(document).ready(function() {

//隐藏二级三级菜单

$(".twobox").hide()

$(".three").hide()

//鼠标移匨姻级菜单时显示

$(".one>li").mouseover(function(){

$(this).find(".twobox").slideDown(500)

})

})

})

//造移除时隐藏

$(".one>li").mouseleave(function(){

$(this).find(".twobox").slideUp(500)

});

//当鼠标移动到包含三级菜单的二级菜单时显示

$(".two").mouseover(function(){(

) .("slaid ulang" 0).

})

//当鼠标移除时隐藏

$(".two").mouseleave(function(){

$(this).find(".three").slideUp(500)

})

})

//.find()遍历      .mouseover鼠标移动   .mouseleave鼠标移除   .slideDown()滑动方式 街

//总结 在html方面出现卡壳 浪费了很多时间  在jQuery方面比较稳定

</skrip>

</kepala>

<badan>

<div class="menu">

<ul class="one">

<li>Homepage</li>

<li>Konoha

= " <oul class ">

<li>Sarutobi Clan</li>

<li class="two">Senju Clan

<ul class="three">

< sur<< /li & gt;

& lt; li & gt; Senju hashirama & lt;/li & gt;

& lt; li & gt; senju tobirama & lt; ;/li>

<li class="two">Uchiha clan

<ul class="three">

< ;li>Indra Otsutsuki</li>

;Mali>

;

;/li>

<li>Indra Uchiha</li>

<li>Uchiha Sasuke</li>

<li>Iwa Ninja

<oboxul" class="t

" <li>debu</li>

<li class="two">Shadow

<ul class="tiga">

<li>Generasi pertama</li>

li & gt; generasi kedua & lt;/li & gt;

& lt; li & gt; tiga & lt;/li & gt;

& lt; li & gt; ="dua">Cair

<ul class="tiga">

<li> ;Penumpang A</li>

<li>Penumpang B</li>>

C</li>

<li>Penumpang D</li>

< ;/ul>

</li>

<<

< ;li>Sand Ninja</li>

<li>Mist Ninja< /li>

<li>Cloud Ninja</li>

</ul>

&<>&

;/body>

</html>

Answer 2

Saya perlukan kod sumber anda