1. Hướng dẫn tạo jQuery right click context menu
  2. Create CSS Transition Sidebar Nav
  3. Hướng dẫn sử dụng Div bằng HTML với CSS
  4. Hướng dẫn tạo Form Hổ trợ trực tuyến phần 1
  5. Hướng dẫn tạo Form đăng ký thành viên
  6. Hướng dẫn tạo Form đăng nhập hệ thống kết hợp với CSDL
  7. Hướng dẫn tạo Menu Ngang bằng CSS
  8. Hướng dẫn tạo Menu xổ bằng code CSS đơn giản
  9. Hướng dẫn tạo menu xổ bằng CSS
  10. Hướng dẫn tạo Menu xổ bằng Jquery đơn giãn
  11. JQuery CSS Image Slider
  12. Tìm kiếm bằng Ajax
  13. Sự sắp xếp chiều dọc của thẻ block trong HTML
  14. Tạo Layout đơn giản với DIV và CSS

Hướng dẫn tạo Menu xổ bằng code CSS đơn giản

min read
Tags: Html/Css

Menu xổ là một trong những thành phần cơ bản nhất cho mọi trang web cần nhiều điều hướng - cái mà menu thường theo kiểu dàn trải tất cả không thể thay thế được vì chiếm quá nhiều diện tích.

code css

<style>
ul#menu, ul#menu ul#sub {

    padding:0;

    margin: 0;

}

ul#menu li {

     list-style-type: none;    /* code này để bỏ các dấu chấm tròn*/

     float: left;    /* code này để menu dàn hàng ngang*/

     margin-right: 10px;    /* tạo lề cho các menu*/

}

ul#menu li a {

text-decoration: none;

background-color: #900;

padding: 5px;

color: white;

}

ul#menu li {

positon: relative;

} 

ul#menu li ul#sub {

display: none;

position: absolute;

width: 100px;

}

ul#menu li ul#sub li {

margin-top: 10px;

margin-bottom: 5px;

}

ul#menu li:hover ul#sub {

display: block;

 }
</style>

Menu sử dụng danh sách không có thứ tự, tức là thẻ ul và li. Cụ thể mã sẽ kiểu như này:

code html

<ul id="menu">

    <li><a href="#">Menu 1</a></li>

    <li><a href="#">Menu 2</a>

          <ul id="sub">

                 <li><a href="#">Sub Menu 1</a></li>

                 <li><a href="#">Sub Menu 2</a></li>

                 <li><a href="#">Sub Menu 3</a></li>

          </ul>

    </li>

    <li><a href="#">Menu 3</a></li>

    <li><a href="#">Menu 4</a></li>

    <li><a href="#">Menu 5</a></li>

</ul>

Chúc các bạn làm thành công!

Tags: Html/Css
x

Ủng hộ tôi bằng cách click vào quảng cáo. Để tôi có kinh phí tiếp tục phát triển Website!(Support me by clicking on the ad. Let me have the money to continue developing the Website!)