มาลองอีกตัวอย่างที่มีคนพูดในวันนี้: เมนูแบบเลื่อนลง CSS บริสุทธิ์:
แผนผังการสืบพันธุ์
การใช้งานนี้เป็นเรื่องง่ายมาก: การใช้การเปลี่ยนแอตทริบิวต์โฮเวอร์และการเปลี่ยนผ่าน
รหัส:
<! doctype html> <html lang = "en"> <head> <meta charset = "utf-8"> <title> css </title> <style> *{margin: 0; Padding: 0; ขนาดตัวอักษร: 16px; Font-Family: "Microsoft Yahei"; } #Container {width: 100px; มาร์จิ้น: 0 อัตโนมัติ; TEXT-ALIGN: CENTER; ตำแหน่ง: ญาติ; } #container ul {list-style: none; } #Container Span {display: inline-block; ความกว้าง: 100px; ความสูง: 30px; ระดับความสูง: 30px; เคอร์เซอร์: ตัวชี้; } #Container ul {ความสูง: 0; ความกว้าง: 100px; ล้น: ซ่อน; การเปลี่ยนแปลง: ทั้งหมด 1s; ตำแหน่ง: สัมบูรณ์; ด้านบน: 30px; ซ้าย: 0px; } #Container: Hover ul {ความสูง: 330px; } #Container ul li {พื้นหลัง: #eee; ระยะขอบด้านบน: 3px; เคอร์เซอร์: ตัวชี้; ความสูง: 30px; ระดับความสูง: 30px; } </style> </head> <body> <div id = "container"> <span> มือถือ </span> <ul> <li> 1 ที่นี่ </li> <li> 2 ที่นี่ </li> <li> 3 ที่นี่ </li> <li> 4 ที่นี่ </li> <li> 5 ที่นี่ </li> <li> 6 ที่นี่ <li> ที่นี่ </li></ul> </div> </body> </html>เนื่องจาก UL เป็นวัตถุการปรับขนาดจึงควรแยกออกจากการไหลของเอกสาร มันจะไม่ส่งผลกระทบต่อเลย์เอาต์เมื่อมันใช้งานได้จริงเพียงแค่ให้ตำแหน่งแน่นอน
ข้างต้นเป็นเนื้อหาทั้งหมดของบทความนี้ ฉันหวังว่ามันจะเป็นประโยชน์ต่อการเรียนรู้ของทุกคนและฉันหวังว่าทุกคนจะสนับสนุน wulin.com มากขึ้น