บทความนี้แนะนำตัวอย่างของแถบเมนูระดับที่สองที่ใช้ HTML+CSS เพื่อใช้เมาส์
การวาดเอฟเฟกต์แรก:
1. เมาส์ไม่ได้สูงกว่า
2. ใส่เมาส์ลงในเมนูระดับแรกและขยายเมนูรอง
3. ใส่เมาส์ลงในเมนูรอง
รหัส:
<html> <head> <title> การทดสอบเมนูระดับที่สอง </title> <meta charset = utf-8> <style type = text/css>/*เพื่อให้เมนูอยู่ตรงกลาง*/body {padding -top: 100px; ------------------------------------------------------ ------------------------------------------------------ ------------------------------------------------------ -------------------- * / .menudiv {Border: 2px Solid #AAC; downline ของแท็ก* / .menudiv a {text-decics: none;} /* ตั้งค่า ul และ li* /. men udiv ul, .menudiv li {list-style: ไม่มี; Float: ซ้าย;} /* ตั้งค่าเมนูระดับที่สองตำแหน่งสัมบูรณ์และซ่อน* /.menudiv> ul> ul {ตำแหน่ง: Absolutee; /.menudiv> li> ul> li {float: none;} /* เมาส์วางไว้ในเมนูระดับแรกแสดงเมนูรอง* /.menudiv> ul> li: hover ul {display: block;} /* 1 -เมนูระดับ* / .menudiv> li> a {ความกว้าง: 120px; } /* ในเมนูระดับแรกกล่องซ้ายแรก* /.menudiv> li: เด็กแรก> a {border-hered: none;} /* ในเมนูชั้นหนึ่งสไตล์ของเมาส์วาง* /.menudiv> ul> li> a: hover {color: #f0f; Line-Height: 36px; การตั้งค่า bezel ด้านบน* / .menudiv> li> li: ลูกคนแรก> a {border-top: 1px solid #ccc;} /* ในเมนูรองสไตล์ของเมาส์ถูกวางไว้* / .menudiv> ul > li> li> a: hover {color: #a4f; -- จบ ----------------------------------------------- ------------------------------------------------------ ------ body> <! --------- เมนู HTML รหัส -----------------------------> <div class = menudiv> <ul> <li> <a href =#> เมนูหนึ่ง </a> <ul> <li> <a href =#> เมนูสองระดับ </a> </li> <a href = #> เมนูรอง </a> </li> <li> <a href =#> เมนูที่สอง -ระดับ </a> </li></ul> </li> <li> <a href =#> เมนูสอง </a> <ul> <li> <a href =#> เมนูที่สอง -level </a> </li> <li> <a href =#> เมนูสองระดับ </a> </li > </li> <li> <li> <a href =#> เมนูสาม </a> <ul> <li> <a href =#> เมนูรอง </a> </li> <a href =# > เมนูรอง </a> </li> <li> <a href =#> เมนูที่สอง -ระดับ </a> </li> <li> <a href =#> เมนูรอง </a> </li > <li> <a href =#> เมนูที่สอง -level </a> </li></ul> </li> <li> <a href =#> เมนู 4 </a> </li> </li> </li> </li> เมนู href =#> ห้า </a> <ul> <li> <a href =#> เมนูที่สอง </a> </li> <li> <a href =#> เมนูที่สอง </a> <// Li> <li> <a href =#> II เมนู </a> </li></ul> </li> </ul> </div> <! ----------- --- -------- End -----------> </body> </html>ข้างต้นเป็นเนื้อหาทั้งหมดของบทความนี้