Artikel ini memperkenalkan contoh -contoh bilah menu tingkat kedua yang menggunakan HTML+CSS untuk mengimplementasikan mouse.
Pertama -tama efek menggambar:
1. Tikus tidak ada di atas
2. Letakkan mouse di menu tingkat pertama dan kembangkan menu sekunder
3. Letakkan mouse di menu sekunder
Kode:
<Html> <Head> <Title> Tes Menu Tingkat Kedua </iteme> <meta charset = UTF-8> <style type = text/css>/*untuk membuat menu di tengah*/body {padding -Top: 100px; -------------------------------------------------- -------------------------------------------------- -------------------------------------------------- -------------------- * / .menudiv {border: 2px solid #AAC; Downline dari tag* / .menudiv a {Text-Decics: None;} /* Set Ul dan Li Style* / .Men UDIV Ul, .Menudiv li {List-style: None; float: left;} /* Setel menu tingkat kedua, dan sembunyikan* /.menudiv> ul> ul {position: absolutee; /. -Level menu* / .Menudiv> Li> A {Width: 120px; } /* Di menu tingkat pertama, kotak kiri pertama* /.menudiv> li: anak pertama> {border-hered: none;} /* di menu kelas satu, gaya mouse ditempatkan* /.menudiv> ul> li> a: hover {color: #f0f; Line-height: 36px; Pengaturan bezel atas* / .menudiv> li> li: anak pertama> {border-top: 1px solid #ccc;} /* di menu sekunder, gaya mouse ditempatkan* / .menudiv> ul > Li> Li> A: Hover {Color: #A4F; -- Akhir ----------------------------------------------- -------------------------------------------------- ------ Body> <! --------- Menu HTML Code --------------------- class = menudiv> <ul> <li> <a href =#> menu satu </a> <ul> <li> <a href =#> dua menu tingkat </a> </li> <a href = #> menu sekunder </a> </li> <li> <a href =#> menu tingkat kedua </a> </li> </ul> </li> <li> <a href =#> Menu dua </a> <ul> <li> <a href =#> menu tingkat kedua </a> </li> <li> <a href =#> dua menu tingkat </a> </li > </li> <li> <li> <a href =#> menu tiga </a> <ul> <li> <a href =#> menu sekunder </a> </li> <a href =# > Menu Sekunder </a> </li> <li> <a href =#> menu tingkat kedua </a> </li> <li> <a href =#> menu sekunder </a> </li > <li> <a href =#> menu tingkat kedua </a> </li> </ul> </li> <li> <a href =#> menu 4 </a> </li> a href =#> menu lima </a> <ul> <li> <a href =#> menu kedua </a> </li> <li> <a href =#> menu kedua </a> </s Li> <li> <a href =#> ii menu </a> </li> </ul> </li> </ul> </div> <! --- -------- Akhir -----------> </body> </html>Di atas adalah semua isi artikel ini.