0 Code dropdown menu sử dụng CSS và JS đơn giản

Đây là code để tạo 1 dropdown menu sử dụng CSS và JS đơn giản .

Demo

Bạn chỉ cần copy code này vào phần muốn hiển thị trong trang web là được

<style>
#navbar { margin: 0; padding: 0; height: 1em; }
#navbar li { list-style: none; float: left; }
#navbar li a { display: block; padding: 3px 8px; background-color: #5e8ce9; color: #fff; text-decoration: none; }
#navbar li ul { display: none; width: 10em; background-color: #5e8ce9;}
#navbar li:hover ul, #navbar li.hover ul { display: block; position: absolute; margin: 0; padding: 0; }
#navbar li:hover li, #navbar li.hover li { float: none; }
#navbar li:hover li a, #navbar li.hover li a { background-color: #5e8ce9; color:white; }
#navbar li a:hover { background-color: #8db3ff; }
</style>
<script> champi_info = function() {
var sfEls = document.getElementById("navbar").getElementsByTagName("li");
for (var i=0; i<sfEls.length; i++) { sfEls[i].onmouseover=function() { this.className+=" hover"; }
sfEls[i].onmouseout=function() { this.className=this.className.replace(new RegExp(" hover\\b"), ""); } } }
if (window.attachEvent) window.attachEvent("onload", champi_info);
</script>
<ul id="navbar">
<li><a href="#">Item One</a><ul><li>
<a href="#">Subitem One</a></li><li>
<a href="#">Second Subitem</a></li><li>
<a href="#">Numero Tres</a></li></ul></li>
<li><a href="#">Second Item</a><ul><li>
<a href="#">Just one subitem</a></li></ul>
</li>
<li><a href="#">No Subitem</a></li>
<li><a href="#">Number Four</a><ul><li>
<a href="#">Subitem One</a></li><li>
<a href="#">Second Subitem</a></li><li>
<a href="#">Numero Tres</a></li><li>
<a href="#">Fourth Thinger</a></li></ul>
</li>
</ul>