JS melaksanakan navigasi menengah menegak meniru kemahiran Jingdong Taobao_javascript

Kod ini sangat mudah, jadi saya tidak akan bercakap terlalu banyak karut dan hanya memberi anda kod:

Salin kod Kod adalah seperti berikut: function hoversee(){ var list = document.getElementById('nav'); var zu = list.getElementsByTagName("li"); untuk(var i=0;i { zu[i].onmouseover = function(){ this.getElementsByTagName('dl')[0].style.display = "block"; } zu[i].onmouseout = function(){ this.getElementsByTagName('dl')[0].style.display = "tiada"; } } } window.onload = hoversee; *{ font-family:Microsoft YaHei; jidar:0; pelapik:0; } badan{lebar:100%;} ul{list-style: none;} a{text-decoration: none;} #header{ ketinggian:50px; ketinggian garis:50px; latar belakang:#455A6E; } #header h2,#header h3{ berat fon:500; } #header h2{ warna:#fff; saiz fon:18px; lebar:180px; penjajaran teks: tengah; latar belakang:#0D2E49; } #header h3{color:#fff;font-size:16px;} .mycenter{ lebar:900px; margin:0 auto; } #header div.mycenter{ /*相对定位*/ jawatan:saudara; } #nav { lebar:180px; latar belakang:rgba(0, 102, 173, 0.5); indeks-z:999; } #nav li{ ketinggian:40px; padding-left:40px; ketinggian garis: 40px; jawatan:saudara; } #nav h3{height:40px;} #nav li dl{ jawatan:saudara; kiri:140px; atas:-40px; lebar:150px; latar belakang:#fff; paparan:tiada; padding:8px 10px; } #nav dt{ lebar:150px; ketinggian garis: 30px; ketinggian:30px; latar belakang:#36C1AF; warna:#fff; penjajaran teks: tengah; } #nav dd a{ paparan:blok; ketinggian:30px; lebar:150px; saiz fon:14px; warna:#858585; } #nav dd a:hover{ hiasan teks: garis bawah; } #kandungan{ latar belakang:#E95200; Tinggi:500px; } & Lt; h2 & gt; menu pengurusan latar belakang & lt;/h2 & gt; ... Pengurusan Akaun & Lt; dt & gt; pengurusan akaun & lt;/dt & gt; & Lt; a href = "#" & gt; Tukar kata laluan & lt;/a & gt; & Lt; a href = "#" & gt; & Lt;a href = "#" & gt; ... ... Pengurusan halaman utama Pengurusan halaman utama & Lt; a href = "#" & gt; … /a> Ubah suai maklumat bawah ... ...& Lt; h3 & gt; pengurusan produk & lt;/h3 & gt; Pengurusan Produk Tambah produk baharu & Lt; a href = "#" & gt; menguruskan semua produk & lt;/a & gt; Pengurusan Kategori ... ... Pengurusan lt;/h3> Pengurusan Berita Terbitkan Berita & Lt; a href = "#" & gt; semua pengurusan berita & lt;/a & gt; Tambah siri Pengurusan Siri Berita ... ... & Lt; h3 & gt; pengurusan maklum balas & lt;/h3 & gt; ... 🎜> ... ... & Lt; h3 & gt; Pengurusan Maklumat Enterprise & lt;/h3 & gt; Pengurusan Maklumat Perusahaan Profil Syarikat sahaja >Pengurusan Pengambilan Bakat ... ... h3> dalam & Lt; a href = "#" & gt; Tambah pentadbir baru & lt;/a & gt; Lihat semua kebenaran akaun dalam ... ... Pengurusan Fungsi Pengurusan Fungsi nur Berechtigungsanzeige und -anwendung & Lt; a href = "#" & gt; anzeigen Ihre Berechtigungen & lt;/a & gt; & Lt; a href = "#" & gt; Anwendungsberechtigungen & lt;/a & gt;

Freunde, fügen Sie einfach den Anrufcode entsprechend Ihren eigenen Bedürfnissen hinzu und verwenden Sie ihn gerne.