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

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!