Dưới đây là một ví dụ về code HTML, CSS và jQuery cho một menu đơn giản với hai mục con:
HTML
<nav>
<ul>
<li><a href="#">Trang chủ</a></li>
<li>
<a href="#">Sản phẩm</a>
<ul>
<li><a href="#">Sản phẩm 1</a></li>
<li><a href="#">Sản phẩm 2</a></li>
</ul>
</li>
</ul>
</nav>
CSS
nav ul {
list-style: none;
margin: 0;
padding: 0;
}
nav li {
display: inline-block;
position: relative;
}
nav ul ul {
display: none;
position: absolute;
top: 100%;
left: 0;
background-color: #fff;
padding: 0;
margin: 0;
border: 1px solid #ccc;
border-top: none;
}
nav ul ul li {
display: block;
white-space: nowrap;
}
nav li:hover > ul {
display: inherit;
}
nav a {
display: block;
padding: 10px;
text-decoration: none;
color: #333;
}
nav ul ul a {
padding: 5px 10px;
}
nav ul li:hover > a {
background-color: #f0f0f0;
}
jQuery
$(document).ready(function() {
$('nav ul li').hover(
function() {
$('ul', this).fadeIn();
},
function() {
$('ul', this).fadeOut();
}
);
});
Chú ý rằng để chạy được jQuery, bạn cần bao gồm thư viện jQuery vào trang web của bạn.