หน้าหลัก:
<body> <ul id = เมนู> <li> <a href =#> เมนูแรก 1 </a> <ul> <li> เมนูที่สอง 1 </li> <li> เมนูที่สอง 1-1 </li> <li> เมนูที่สอง 1-2 </li> <li> เมนูที่สอง 1-3 </li> menu2 </a> <ul> <li> เมนูที่สอง 2-1 </li> <li> เมนูที่สอง 2-2 </li> <li> เมนูที่สอง 2-3 </li> </li> </li> <li> เมนูที่สอง 2-3 </a> <ul> <li> เมนูที่สอง <li> เมนูที่สอง </li> </li> <li> เมนูที่สอง 3 </a> <ul> <li> เมนูระดับที่สอง 4-1 </li> <li> เมนูระดับที่สอง 4-2 </li> <li> เมนูระดับที่สอง 4-3 </li> </li> </li>
ตัวอย่างเมนูพับ:
ส่วน CSS
<head> <style type = text/css> li {list-style: none; ลบกราฟิกก่อนหน้าของรายการ} li a {color:#123; ตั้งค่าสีข้อความของเมนูระดับแรก} #menu ul {display: none; ตั้งค่าเมนูรองที่ไม่แสดงโดยค่าเริ่มต้น} #MENU> LI: HOVER UL {Display: Block; เมื่อเมาส์เลื่อนผ่านเมนูระดับแรกเมนูรองจะปรากฏขึ้น} </style> </head>ตัวอย่างเมนูหีบเพลง:
ส่วน CSS
<head> <style type = text/css> li {list-style: none; ลบรูปก่อนหน้าของรายการ} li a {color:#123; ตั้งค่าสีข้อความของเมนูระดับแรก} #menu> li,#เมนู> li> a,#เมนู> li> ul {float: ซ้าย; เมนูระดับแรกเมนูระดับที่สองที่เคลื่อนที่ซ้าย} #MenU> li> a {display: block; พื้นหลังสี; สีแดง; } #menu> li: hover ul {display: block;}#เมนู> ul {display: none; ความกว้าง: 100px; พื้นหลังสี:#123; Padding-Top: 20px;} </style> </head> สรุปด้านบนเป็นรหัสตัวอย่างสำหรับการใช้เมนูการพับและเมนูหีบเพลงที่แนะนำโดยตัวแก้ไข ฉันหวังว่ามันจะเป็นประโยชน์กับคุณ หากคุณมีคำถามใด ๆ โปรดฝากข้อความถึงฉันและบรรณาธิการจะตอบกลับคุณทันเวลา ขอบคุณมากสำหรับการสนับสนุนเว็บไซต์ Wulin.com!
หากคุณคิดว่าบทความนี้มีประโยชน์สำหรับคุณโปรดพิมพ์ซ้ำ โปรดระบุแหล่งที่มาขอบคุณ!