Đây là toàn bộ code thanh menu ngang 2 cấp. Mình đã chú thích rất chi tiếc phần CSS để các bạn tự sửa theo ý mình ( đoạn từ <style...> đến </style>)

Code:

<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 [b]menu[/b]--*/
 font-family: Tahoma;
 font-size: 12px;
 color: #FFFFFF; /* Màu chữ thanh [b]menu[/b] */
 font-weight: Bold;
 background-color: #1376C9; /* Màu nền của thanh [b]menu[/b]. Nếu thích ảnh nền thì thay bằng  background-image: url('link ảnh nền'); */

}
ul#topnav li {
 float: left;
 margin: 0; padding: 0;
 border-right: 0px solid #555; /*-- các [b]menu[/b] 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 [b]menu[/b] cấp 2 là ẩn --*/
 width: 100%;
 background: #00A5F4; /* màu nền của [b]menu[/b] cấp 2 */
 color: #ffffff;
 /*-- Bo góc phải dưới cho [b]menu[/b] cấp 2 --*/
 -moz-border-radius-bottomright: 7px;
 -khtml-border-radius-bottomright: 7px;
 -webkit-border-bottom-right-radius:7px;
 /*-- Bo góc trái dưới cho [b]menu[/b] cấp 2 --*/
 -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ị [b]menu[/b] cấp 2 khi đưa chuột vào--*/
ul#topnav li span a { display: inline; }  /*-- tất cả các [b]menu[/b] câp 2 cùng nằm trên 1 dòng--*/
ul#topnav li span a:hover {
text-decoration: none; /* Bỏ gạch chân [b]menu[/b] cấp 2 khi rê chuột vào */
background: #1CE321; /* Màu nền [b]menu[/b] cấp 2 khi rê chuột vào */
color:#FF0000; /* Màu chữ [b]menu[/b] cấp 2 khi rê chuột vào */
}
</style>



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

    </li>

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

    <li><a href="#">[b]Menu[/b] 4</a></li>
    <li><a href="#">[b]Menu[/b] 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>

Về phần các menu thì nhìn vào đó các bạn sẽ biết cách viết thêm vào. Mình giải thích thêm để lỡ có bạn không biết gì cũng làm được:

* Một menu cấp một là nắm trong một cặp thẻ <li> ...</li>, ví dụ:

<li> <a href="/forum"> Diễn đàn </a></li>

* Bây giờ nếu ta làm các menu con cho nó (tức là menu cấp 2) thì ta không đặt link cho menu cấp một mà thay vào đó là một dấu #, đồng thời ta chưa đóng bằng thẻ </li>. Ví dụ

<li> <a href="#"> Menu mẹ </a>

Sau đó ta đặt một loạt link cho các menu con trong cặp thẻ <span>...</span>. Cuối cùng ta dùng thé </li> đóng lại - kết thúc một menu mẹ - con. Cụ thể như thế này:

<li> <a href="#"> Menu mẹ </a>
<span>
<a href="link menu con 1"> Menu con 1</a> |
<a href="link menu con 2"> Menu con 2</a> |
<a href="link menu con 3"> Menu con 3</a>|
</span>
</li>

( Mình để bên ngoài thẻ code để đánh dấu cho dễ, các mod thông cảm)

Ghi chú: Dấu sổ dọc (|) chỉ là để tạo đường ngăn giữa 2 menu cùng cấp, nếu các bạn không thích thì bỏ đi không sao.

[/font][/color]Muốn tăng chiều cao cho thanh menu thì cháu sửa CSS lại:

- Trong ul#topnav li a
Cháu sửa padding: 6px 10px; thành padding: 12px 10px; ( 12 hay bao nhiêu tùy ý, muốn thay đổi khoảng cách giữa các menu thì cháu có thể sửa luôn con số 10 phía sau)

- Trong ul#topnav li span cháu cũng làm tương tự cho menu cấp 2
Sửa padding: 6px 0; lại thành padding: 12px 0;
Đồng thời sửa left: 0; top:26px; lại thành left: 0; top:38px; (Dòng này xác định vị trí của thanh menu cấp 2 so với cạnh trái và cạnh trên của cửa sổ trình duyệt).

- Bác sửa lại chú thích về màu chữ: Để chỉnh mài chữ cháu sửa color trong ul#topnav li a nhé.

- Thêm: Nếu thích tạo bóng cho chữ thì thêm vào ul#topnav dòng sau:
text-shadow: -1px 0 #000000, 0 3px #FF0000, 2px 0 #000000, 0 -1px #00FF00;
(Những con số này là chỉ độ dày, chiều hướng và màu sắc của bóng )