Hướng Dẫn Tạo Menu Xổ Bằng Code CSS đơn Giản - HOANGUYENIT

Trang chủ » Code Menu Xổ Xuống Html Css » Hướng Dẫn Tạo Menu Xổ Bằng Code CSS đơn Giản - HOANGUYENIT

Có thể bạn quan tâm

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!

Từ khóa » Code Menu Xổ Xuống Html Css