Đây là một hướng dẫn về cách tạo CSS tinh khiết thả xuống mà không cần sử dụng javascript. Tôi nhận thấy tuy nhiên, người ta thường sử dụng JavaScript để đạt được hiệu ứng này. Trên thực tế, có một cách đơn giản để làm điều đó chỉ với CSS.

Đây là ví dụ

Bước đầu tiên: chúng tôi tạo ra một cấu trúc HTML cơ bản.

  > <Div id = "tiêu đề">
 <h1> phát triển của Paradise trình diễn </ h1>
 > <Ul id = "menu">
 <li> <span> Trang chủ </ span>
 <ul>
 > Menu item 1 </a> </li> <li> <a href = "#"> Menu item 1 </ a> </ li>
 > Menu item 2 </a> </li> <li> <a href = "#"> Menu khoản 2 </ a> </ li>
 > Menu item 3 </a> </li> <li> <a href = "#"> Menu mục 3 </ a> </ li>
 </ Ul>
 </ Li>
 <li> <span> Giới thiệu </ span>
 <ul>
 > Menu item 1 </a> </li> <li> <a href = "#"> Menu item 1 </ a> </ li>
 > Menu item 2 </a> </li> <li> <a href = "#"> Menu khoản 2 </ a> </ li>
 > Menu item 3 </a> </li> <li> <a href = "#"> Menu mục 3 </ a> </ li>
 </ Ul>
 </ Li>
 <li> <span> Sản phẩm </ span>
 <ul>
 > Menu item 1 </a> </li> <li> <a href = "#"> Menu item 1 </ a> </ li>
 > Menu item 2 </a> </li> <li> <a href = "#"> Menu khoản 2 </ a> </ li>
 > Menu item 3 </a> </li> <li> <a href = "#"> Menu mục 3 </ a> </ li>
 </ Ul>
 </ Li>
 </ Ul>
 </ Div> 

Bước thứ hai: bây giờ chúng ta tạo ra phép thuật mã CSS

  ; padding : 0 ; } * {Margin: 0; padding: 0;}

 body {
 ; background: # 222;
 Arial, Helvetica, sans-serif ; font: 100% bình thường Arial, Helvetica, sans-serif;
 }

 : #fff ; } h1 {color: # fff;}

 # Header {
 ; chiều cao: 120px; vị trí: tương đối;
 ; background: # 333;
 }

 # Menu {
 margin: 0px;
 padding: 0px;
 vị trí: tuyệt đối;
 ; top: 70px;
 hiển thị: block;
 }

 # Menu> li {
 danh sách-style-type: none;
 float: left;
 hiển thị: block;
 ; margin: 0px 10px;
 vị trí: tương đối;
 padding: 10px;
 width: 100px;
 }

 ul { # Menu> li: hover ul {
 hiển thị: block;
 }

 { # Menu> li: hover {
 ; background-color: # 808080;
 -Moz-biên-bán kính: 10px;
 -Webkit biên giới-bán kính: 10px;
 }

 # Menu li ul {
 margin: 0px;
 padding: 0px;
 hiển thị: không;
 }
 # Menu li li ul {
 danh sách-style-type: none;
 ; margin: 10px 0 0 0;
 font-size: 11px;
 }

 # Menu li ul li a {
 hiển thị: block;
 ; padding: 5px 10px;
 ; color: # fff;
 text-decoration: none;
 font-weight: in đậm;
 }

 a { # Menu li ul li: hover một {
 ; background-color: # 606060;
 -Moz-biên-bán kính: 5px;
 -Webkit biên giới-bán kính: 5px;
 }

 # Menu li {span
 con trỏ: con trỏ;
 ; margin: 0px 10px;
 font-weight: in đậm;
 ; font-size : 11px ; color: # fff; font-size: 11px;
 } 

Xin lưu ý rằng mã này không hoạt động trong IE6 (trình duyệt này chỉ người nghèo không biết những gì có nghĩa là li ul>).

Tôi sẽ biết ơn nếu bạn có thể mất một thứ hai để quảng bá blog và chia sẻ của tôi liên kết với bất kỳ của các trang mạng ưa thích của bạn bằng cách sử dụng liên kết dưới đây. Dưới đây là một liên kết đến trang web ưa thích của chúng tôi nếu bạn muốn đăng ký một tên miền .

Nộp theo: CSS , Hướng dẫn của admin