[Code] Menu ngang 2 cấp

Hôm qua mình vào forum này:

Code:

http://www.nhatnghe.com/forum/

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 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>