Đây là một ví dụ về mã HTML cho một menu dọc 2 cấp cơ bản:
<!DOCTYPE html>
<html>
<head>
<title>Menu dọc 2 cấp</title>
<style>
/* Thiết lập kiểu dáng cho menu */
ul {
list-style-type: none;
margin: 0;
padding: 0;
width: 200px;
background-color: #f1f1f1;
}
li a {
display: block;
color: #000;
padding: 8px 16px;
text-decoration: none;
}
/* Thiết lập kiểu dáng cho menu con */
li ul {
position: absolute;
top: 0;
left: 200px;
display: none;
background-color: #ddd;
}
li:hover ul {
display: block;
}
li ul li a {
padding: 8px 16px;
}
</style>
</head>
<body>
<!-- Đây là menu dọc 2 cấp -->
<ul>
<li><a href="#">Menu 1</a></li>
<li><a href="#">Menu 2</a>
<ul>
<li><a href="#">Menu con 2.1</a></li>
<li><a href="#">Menu con 2.2</a></li>
<li><a href="#">Menu con 2.3</a></li>
</ul>
</li>
<li><a href="#">Menu 3</a></li>
<li><a href="#">Menu 4</a>
<ul>
<li><a href="#">Menu con 4.1</a></li>
<li><a href="#">Menu con 4.2</a></li>
</ul>
</li>
</ul>
</body>
</html>
Trong ví dụ này, chúng ta sử dụng thẻ <ul> để tạo ra một danh sách không có kiểu dáng. Sử dụng CSS để thiết lập kiểu dáng cho menu và menu con. Chúng ta sử dụng thuộc tính position: absolute để định vị các menu con, và sử dụng display: none và display: block để hiển thị và ẩn các menu con tùy thuộc vào sự kiện di chuột của người dùng.
Đây là một ví dụ về mã CSS đầy đủ để thiết kế menu trên:
/* Thiết lập kiểu dáng cho toàn bộ trang web */
body {
margin: 0;
padding: 0;
font-family: Arial, sans-serif;
}
/* Thiết lập kiểu dáng cho menu */
ul {
list-style-type: none;
margin: 0;
padding: 0;
width: 200px;
background-color: #f1f1f1;
}
li a {
display: block;
color: #000;
padding: 8px 16px;
text-decoration: none;
}
/* Thiết lập kiểu dáng cho menu con */
li ul {
position: absolute;
top: 0;
left: 200px;
display: none;
background-color: #ddd;
}
li:hover ul {
display: block;
}
li ul li a {
padding: 8px 16px;
}
Trong ví dụ này, chúng ta thiết lập kiểu dáng cho toàn bộ trang web bằng cách thiết lập font chữ và các thuộc tính margin và padding. Sau đó, chúng ta thiết lập kiểu dáng cho menu bằng cách thiết lập các thuộc tính như list-style-type, width và background-color.
Sau đó, chúng ta thiết lập kiểu dáng cho các liên kết trong menu bằng cách thiết lập các thuộc tính như display, color, padding và text-decoration.
Chúng ta cũng thiết lập kiểu dáng cho các menu con bằng cách thiết lập các thuộc tính position, top, left và display. Chúng ta sử dụng display: none và display: block để hiển thị và ẩn các menu con tùy thuộc vào sự kiện di chuột của người dùng. Cuối cùng, chúng ta thiết lập kiểu dáng cho các liên kết trong các menu con bằng cách thiết lập thuộc tính padding.