Đây là một dạng menu khá phổ biến hiện nay,được các wapmaster sử dụng rất nhiều nhờ tính trang nhã và bắt mắt của nó.
Bạn có thể xem Demo ngay phía dưới.


Trước tiên là đoạn mã cho Menu này
<style>
#menu {padding-left:5px;border-bottom:5px solid #0f95cb;font-size:12px}#menu a {color:#494949;font-weight:bold}
#menu tr, #menu td{height:25px;padding-top:4px}
#menu td {padding-left:5px;padding-right:5px;text-align:center}
#menu .active {background:#0f95cb;}
#menu .active a {color:#fff}
</style>
<div id="menu"><table cellspacing="0" cellpadding="0">

<tbody><tr>
<td class="active">
<a href="/">Home</a></td>

<td width="23%"><a href="http://">Upload</a></td>
<td width="23%"><a href="http://">Blog</a></td>
<td width="23%"><a href="http://">Forum</a></td></tr>
</tbody></table></div>



Các thuộc tính quan trọng:
- border-bottom:5px solid #0f95cb; Độ dày đường viền phía dưới là 5px,nó có mã màu "#0f95cb".
- .active {background:#0f95cb; Màu nền của link hiện tại (ở ví dụ này là 'Home" )

Nhược điểm của menu này là không thể tự động chuyển màu khi chuyển sang link khác.Chính vì thế nên bạn phải chỉnh sử thủ công ở mỗi trang.
Ví dụ: ở trang Forum,tôi muốn dòng Forum có nền là xanh,thì bạn chỉ việc thêm thuộc tính .active {background:#0f95cb; vào trước td của link đó.
Cụ thể tôi làm như sau:
<tr>
<td >
<a href="/">Home</a></td>

<td width="23%"><a href="http://">Upload</a></td>
<td width="23%"><a href="http://">Blog</a></td>
<td class="active" width="23%"><a href="http://">Forum</a></td></tr>


Kết quả:


Chúc bạn thành công!
TOP RANK
0 -1

Polly po-cket