นี่คือการสอนเกี่ยวกับวิธีการสร้าง Drop CSS บริสุทธิ์ลงเมนูโดยไม่ต้องใช้ JavaScript ผมสังเกตเห็น แต่ที่คนมักจะใช้จาวาสคริปต์เพื่อให้บรรลุผลนี้ ที่จริงแล้วมีวิธีที่ง่ายที่จะทำเฉพาะกับ CSS

นี่คือ ตัวอย่างเช่น

ขั้นแรก : เราจะสร้างโครงสร้างพื้นฐานของ HTM​​L

  > <div id ="หัว">
 <h1> นักพัฒนาสาธิต Paradise </ h1>
 > <ul id ="เมนู">
 <li> <span> หน้าแรก </ font>
 <ul>
 > Menu item 1 </a> </li> <li> <a href ="#"> เมนูรายการ 1 </ a> </ li>
 > Menu item 2 </a> </li> <li> <a href ="#"> รายการเมนูที่ 2 </ a> </ li>
 > Menu item 3 </a> </li> <li> <a href ="#"> รายการเมนูที่ 3 </ a> </ li>
 </ ul>
 </ li>
 <li> <span> เกี่ยวกับเรา </ span>
 <ul>
 > Menu item 1 </a> </li> <li> <a href ="#"> เมนูรายการ 1 </ a> </ li>
 > Menu item 2 </a> </li> <li> <a href ="#"> รายการเมนูที่ 2 </ a> </ li>
 > Menu item 3 </a> </li> <li> <a href ="#"> รายการเมนูที่ 3 </ a> </ li>
 </ ul>
 </ li>
 <li> <span> ผลิตภัณฑ์ </ font>
 <ul>
 > Menu item 1 </a> </li> <li> <a href ="#"> เมนูรายการ 1 </ a> </ li>
 > Menu item 2 </a> </li> <li> <a href ="#"> รายการเมนูที่ 2 </ a> </ li>
 > Menu item 3 </a> </li> <li> <a href ="#"> รายการเมนูที่ 3 </ a> </ li>
 </ ul>
 </ li>
 </ ul>
 </ p> 

ขั้นตอนที่สอง : ตอนนี้เราสร้างโค้ด CSS มายากล

  ; padding : 0 ; } } * {margin : 0; padding : 0;

 body {
 ; background : # 222;
 Arial, Helvetica, sans-serif ; font : 100% ปกติ Arial, Helvetica, sans - serif;
 }

 : #fff ; } h1 {สี : # fff;}

 # {ส่วนหัว
 ; ความสูง : 120px; ตำแหน่ง : ญาติ;
 ; background : # 333;
 }

 เมนู # {
 margin : 0px;
 padding : 0px;
 position : absolute;
 ; top : 70px;
 display : block;
 }

 # li> เมนู {
 รายการแบบชนิด : none;
 ลอย : ด้านซ้าย;
 display : block;
 ; margin : 10px 0px;
 ตำแหน่ง : ญาติ;
 padding : 10px;
 ความกว้าง : 100px;
 }

 ul { # เมนู> li : ul {เลื่อนเมาส์ไปวาง
 display : block;
 }

 { # เมนู li> : {เลื่อนเมาส์ไปวาง
 ; background - color : # 808080;
 - moz รัศมี - border : 10px;
 - - webkit รัศมี - border : 10px;
 }

 # เมนู li ul {
 margin : 0px;
 padding : 0px;
 display : none;
 }
 # เมนู li ul li {
 รายการแบบชนิด : none;
 ; margin : 10px 0 0 0;
 font - size : 11px;
 }

 # เมนู li ul li {
 display : block;
 ; padding : 10px 5px;
 ; สี : # fff;
 ตกแต่งข้อความ : ไม่มี;
 น้ำหนักแบบอักษร : ตัวหนา;
 }

 a { # เมนู li ul li : {เลื่อนเมาส์ไปวาง
 ; background - color : # 606060;
 - moz รัศมี - border : 5px;
 - - webkit รัศมี - border : 5px;
 }

 # เมนู span li {
 cursor : ตัวชี้;
 ; margin : 10px 0px;
 น้ำหนักแบบอักษร : ตัวหนา;
 ; font-size : 11px ; สี : # fff; font - size : 11px;
 } 

โปรดทราบว่ารหัสนี้ไม่ได้ผลใน IE6 (นี้เบราว์เซอร์ที่ไม่ดีเพียงไม่ทราบว่า li> ul หมายถึง)

ฉันจะขอบคุณถ้าคุณอาจจะใช้เวลาที่สองที่จะช่วยโปรโมทบล็อกและในส่วนของฉันลิงค์นี้กับใด ๆ ของเว็บไซต์เครือข่ายที่ชื่นชอบของคุณโดยใช้ลิงค์ข้างล่างนี้ นี่คือการเชื่อมโยงเว็บไซต์ของเราที่ต้องการหากท่านต้องการ ลงทะเบียนชื่อ Domain .

ยื่นใต้ : Css , Tutorials โดยผู้ดูแลระบบ