Menu ngang 2 cấp

<style type="text/css">
ul#topnav {
margin: 0; padding: 0;
float: left;
width: 100%;
list-style: none;
position: relative; /*--thiết lập vị trí của ul chưa menu--*/
font-family: Tahoma;
font-size: 12px;
color: #FFFFFF;
font-weight: Bold;
background-color: #1376C9;

}
ul#topnav li {
float: left;
margin: 0; padding: 0;
border-right: 0px solid #555; /*-- các menu li --*/
}
ul#topnav li a {
padding: 6px 10px;
display: block;
color: #f0f0f0;
text-decoration: none;
}

#topnav li a:hover,
#topnav li a:active,
#topnav li a:focus {
color: #00FF00; /* Màu chữ khi rê chuột vào */
background-color:#00A5F4; /* Màu nền khi rê chuột vào */
}

ul#topnav li:hover {background: #00A5F4; url(topnav_active.gif) repeat-x; }

ul#topnav li span {
float: left;
padding: 6px 0;
position: absolute;
left: 0; top:26px;
display: none; /*-- mặc định menu cấp 2 là ẩn --*/
width: 100%;
background: #00A5F4;
color: #ffffff;
/*--Bottom right rounded corner--*/
-moz-border-radius-bottomright: 7px;
-khtml-border-radius-bottomright: 7px;
-webkit-border-bottom-right-radius:7px;
/*--Bottom left rounded corner--*/
-moz-border-radius-bottomleft: 7px;
-khtml-border-radius-bottomleft: 7px;
-webkit-border-bottom-left-radius: 7px;
}
ul#topnav li:hover span { display: block;} /*--hiển thị menu cấp 2 khi đưa chuột vào--*/
ul#topnav li span a { display: inline; } /*-- tất cả các menu câp 2 cùng nằm trên 1 dòng--*/
ul#topnav li span a:hover {text-decoration: none; background: #1CE321; color:#FF0000;}
</style>


<ul id="topnav">
<li>
<a href="#">Menu 1</a>
<!--Subnav Starts Here-->
<span>
<a href="#"> Menu 1-1</a> |
<a href="#"> Menu 1-2</a> |
<a href="#">Menu 1-3</a>
</span>
<!--Subnav Ends Here-->
</li>
<li>
<a href="#">Menu 2</a>
<!--Subnav Starts Here-->
<span>
<a href="#"> Menu 2-1</a> |
<a href="#"> Menu 2-2</a> |
<a href="#"> Menu 2-3</a> |
<a href="#"> Menu 2-4</a>|
<a href="#"> Menu 2-5</a>|
<a href="#">Menu 2-6</a>|

</span>
<!--Subnav Ends Here-->
</li>

<li>
<a href="#">Menu 3</a>
<!--Subnav Starts Here-->
<span>
<a href="#">Menu 3-1</a> |
<a href="#"> Menu 3-2</a> |
<a href="#"> Menu 3-3</a>|
<a href="#">Menu 3-4</a>|
<a href="#"> Menu 3-5</a>|
</span>
<!--Subnav Ends Here-->
</li>

<li><a href="#">Menu 4</a></li>
<li><a href="#">Menu 5</a></li>

<li>
<a href="#">Trang cá nhân</a>
<!--Subnav Starts Here-->
<span>
<!-- BEGIN switch_user_logged_in -->
<a href="/memberlist" target="_blank">Danh sách thành viên</a>|
<a href="/profile?mode=editprofile" target="_blank">Lý lịch của bạn </a>|
<a href="/profile.forum?mode=editprofile&page_profil=preferences&change_theme=aquagrey" class="postlink" target="_blank">Tùy chỉnh giao diện</a>|
<a href="/profile.forum?mode=editprofile&page_profil=signature&change_theme=aquagrey" class="postlink" target="_blank">Sửa chữ ký</a>|
<a href="/profile.forum?mode=editprofile&page_profil=avatars&change_theme=aquagrey" class="postlink" target="_blank">Sửa hình đại diện</a>|
<!-- END switch_user_logged_in -->
<a href="/faq" target="_blank">Trợ giúp</a>|
<a href="/search" target="_blank">Tìm kiếm</a>|
<a href="/privmsg?mode=post&u=1" target="_blank">Liên hệ: Admin</a>|
</span>
<!--Subnav Ends Here-->
</li>

<li><!-- BEGIN switch_user_logged_out --><a href="/register"><blink>Đăng ký</blink></a><!-- END switch_user_logged_out --></li>
<li><!-- BEGIN switch_user_logged_out --><a href="/login">Đăng nhập</a><!-- END switch_user_logged_out --></li>
<li><!-- BEGIN switch_user_logged_in --><a href="#" title="Tin nhắn">Tin nhắn</a><!-- END switch_user_logged_in --></li>
<li><!-- BEGIN switch_user_logged_in --><a href="/login?logout=1" title="Thoát">Thoát</a><!-- END switch_user_logged_in --></li>
</ul>

Hôm qua mình vào forum này:
Code:chọn nội dung
http://www.nhatnghe.com/forum/

Và học được cách làm một thanh Menu ngang 2 cấp. Theo đánh gía của mình tuy nó không hiện đại bằng menu ngang sổ dọc đa cấp nhưng cũng rất đẹp, rất phù hợp với loại forum mà không cần nhiều menu lắm, nghĩa là không có nhiều cái để bấm.
Xem hình (Thanh màu xanh ):