Hiện nay Dropdown menu là dạng menu rất phổ biến trên nhiều trang web đặc biệt là những trang web có cấu trúc phức tạp và cần nhiều Categories để hiển thị hết nội dung của trang. Do vậy Dropdown menu là dạng menu lý tưởng để giải quyết vấn đề này. Trước đây nếu muốn có được Dropdown menu bạn cần phải dùng Javascript và cũng hơi rắc rối mới có được menu như ý.
Nhưng hiện nay với những trình duyệt tân tiến hơn bạn hoàn toàn có thể dùng CSS để tạo ra dropdown menu rất đơn giản. Tuy nhiên, như đã nói, cách này chỉ phù hợp với những trình duyệt mới, còn những trình duyệt cũ như IE 7 trở xuống sẽ không dùng được mà nếu muốn dùng bạn phải dùng Javascript để khắc phục.
Home.htm
<html>
<head>
<link href="stylesheet.css" rel="stylesheet" type="text/css" media="screen" />
</head>
<body>
<div>
<h1>DNGAZ</h1>
<p>Free CSS Template</p>
</div>
<div id="menu">
<ul>
<li><a href="#">Homepage</a></li>
<li><a href="#">About Us</a></li>
<li><a href="#">Products</a></li>
<li><a href="#">Services</a></li>
<li><a href="#">Contact Us</a>
<ul>
<li><a href="#">Admin</a></li>
<li><a href="#">Smod User</a></li>
<li><a href="#">User</a></li>
</ul>
</li>
</ul>
</div>
</body>
</html>
</html>
Stylesheet.css
/* Edited with EditCSS */
/**** Style sheets whose contents could be loaded were ****/
/**** imported instead. Rule order may be incorrect ****/
/**** as a result. ****/
@import "file:///C:/Users/Quang.It/Desktop/QuangLTN/stylesheet.css";
/**** LINK-tag style sheet stylesheet.css ****/
/* Non-http; imported above. */
* {margin: 0; padding: 0;}
#menu {
border: 1px solid #686;
background: #e4e4e3;
float: left;
}
#menu ul {
float: left;
list-style: none;
}
#menu ul li {
position: relative;
float: left;
}
#menu li a {
display: block;
color: #232323;
font-weight: bold;
text-decoration: none;
padding: .3em 6px
}
#menu li a:hover {
color: white;
background: orange;
}
#menu li ul {
position: absolute;
display: none;
width: 10em;
}
#menu li:hover ul {
display: block;
}
#menu ul li ul li{
border: 1px solid #686;
width: 100%;
}