Hướng dẫn tạo menu dropline với CSS

Viết bởi Nguyễn Hữu Hải | Thứ sáu, 21 Tháng 5 2010 11:39

Việc tạo một menu trên một trang web là rất quan trọng. Menu càng linh hoạt sẽ giúp người dùng dễ dàng lựa chọn nội dung hơn.

Bài này mình giới thiệu với các bạn một kiểu Dropline Menu đang được dùng ở nhiều website khác như dantri, vnexpress, ...

Bước 1:

Bạn tạo một đoạn code html như sau:

<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Strict//EN"
"http://www.w3.org/TR/xhtml1/DTD/xhtml1-strict.dtd">
<html>
<head>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8"/>
<title>F5 Viet Nam</title>
<link rel="stylesheet" href=" đường dẫn đến file CSS (style.css)" type="text/css" media="screen" charset="utf-8"/>

</head>

<body>

<div id="wrapper">
<ul id="topnav">
<li><a href="http://f5vietnam.com">Trang chủ</a></li>
<li><a href="http://f5vietnam.com">Tin tức</a></li>
<li><a href="http://f5vietnam.com">Dịch vụ</a>
<ul class="children">
<li><a href="http://f5vietnam.com">Lập trình</a></li>
<li><a href="http://f5vietnam.com">Cơ sở dữ liệu</a></li>
<li><a href="http://f5vietnam.com">Văn phòng</a></li>
<li><a href="http://f5vietnam.com">Thủ thuật</a></li>
<li><a href="http://f5vietnam.com">Thế giới website</a></li>
</ul>
</li>
<li><a href="http://f5vietnam.com">Sản phẩm</a>
<ul class="children">
<li><a href="http://f5vietnam.com">Toán học</a></li>
<li><a href="http://f5vietnam.com">Luyện thi</a></li>
</ul>
</li>
<li><a href="http://f5vietnam.com">Hướng dẫn</a></li>
<li><a href="http://f5vietnam.com">Liên hệ</a>
<ul class="children">
<li><a href="http://f5vietnam.com">Chuyện ngắn</a></li>
<li><a href="http://f5vietnam.com">Chuyện cười</a></li>
<li><a href="http://f5vietnam.com">Đọc và suy ngẫm</a></li>
</ul>
</li>
</ul>
</div>

</body>
</html>

Bước 2:

Bạn tạo một file CSS với tên bạn muốn VD: style.css

*{margin: 0; padding: 0}

body {
font-size: 62.5%;
}

ul {
list-style: none;
}

#wrapper {
width: 700px;
margin: 10px auto;
}

ul#topnav {
float: left;
width: 650px;
position: relative;
font-size: 1.4em;
height: 28px;
background: #e99765 ;

}

ul#topnav li {
float: left;
height: 28px;
padding: 0px;
border-right: 1px solid #2f6184;
}

ul#topnav li a {
padding: 5px 15px;
display: block;
color: #f0f0f0;
text-decoration: none;
}

ul#topnav li:hover {
background: #b21a1a;
}

ul#topnav li ul.children {
float: left;
height: 28px;
line-height: 28px;
padding: 0px;
position: absolute;
left: 0px; top: 28px;
display: none;
width: 650px;
background: #cc2928;
color: white;
-moz-border-radius: 0px 0px 1px 1px;
-khtml-border-radius: 0px 0px 1px 1px;
-webkit-border-radius: 0px 0px 1px 1px;
}

ul#topnav li ul.children li {
border: none;
}

ul#topnav li:hover ul {
display: block;
}

ul#topnav li ul a {
display: inline;
}

ul#topnav li ul a:hover {
text-decoration: underline;
}

ul#topnav li ul li:hover {
background: none;
}