Với CSS, bạn có thể làm được nhiều thứ hơn là một trang web đẹp. Vũ vừa làm xong một đoạn menu 2 cấp bằng CSS để chia sẻ với anh em UNET VIỆT.

Sau đây là các đoạn mã

Đoạn mã CSS:
Code

<style type="text/css" media="screen">
body{ behavior:url("csshover2.htc"); }
.pd_menu_01 {float:left; padding:0; margin:0;color: #FFFFFF;background: #FF0000;width:100%; border:solid 1px #004080;clear:both;} /*Color navigation bar normal mode*/
.pd_menu_01 a, .pd_menu_01 a:visited {
font-family:Arial, Helvetica, sans-serif;
font-style:normal;
font-weight:normal;
font-size:14px;
color: #FFFFFF;
background-color: #FF0000;
text-decoration: none;
}
.pd_menu_01 ul {list-style-type:none;padding:0; margin:0;}
.pd_menu_01 ul li {float:left; position:relative; z-index:auto !important ; z-index:1000 ; border-right:solid 1px #004080; border-left:solid 1px #004080;}
.pd_menu_01 ul li a {color: #FFFFFF;background: #FF0000;float:none !important ; float:left ; display:block; height:30px; line-height:30px; padding:0 10px 0 10px; text-decoration:none; }
.pd_menu_01 ul li ul {display:none; border:none;color: #FFFFFF;background: #FF0000; width:1px}
.pd_menu_01 ul li:hover a {background-color:#BE4A05; text-decoration:none; color:#FFFF80;} /*Color main cells hovering mode*/
.pd_menu_01 ul li:hover ul {display:block; position:absolute; z-index:999; top:29px; margin-top:1px; left:0;}
.pd_menu_01 ul li:hover ul li a {display:block; width:200px; height:auto; line-height:1.3em; margin-left:-1px; padding:5px 10px 5px 10px; border-left:solid 1px #004080; border-bottom: solid 1px #004080; background-color:#FF0080; color:#00FFFF;} /*Color subcells normal mode*/
.pd_menu_01 ul li:hover ul li a:hover {background-color:#B0330F; text-decoration:none;color:#FFFF00;} /*Color subcells hovering mode*/
.pd_menu_01 ul li a:hover {background-color:#BE4A05; text-decoration:none;color:#FFFF80;} /*Color main cells hovering mode*/
.pd_menu_01 ul li a:hover ul {display:block; width:200px; position:absolute; z-index:999; top:29px; left:0; }
.pd_menu_01 ul li ul li a:visited { background-color:#FF0080; color:#00FFFF;} /*Color subcells normal mode*/
.pd_menu_01 ul li a:hover ul li a {display:block; width:200px; height:1px; line-height:1.3em; padding:4px 16px 4px 16px; border-left:solid 1px #004080; border-bottom: solid 1px #004080; background-color:#FF0080; color:#00FFFF;}
.pd_menu_01 ul li a:hover ul li a:hover {background-color:#B0330F; text-decoration:none;color:#FFFF00;} /*Color subcells hovering mode*/
</style>

Bạn copy đoạn mã trên dán vào phía trên thẻ </head> nhé

Đoạn mã menu

Code
<div class="pd_menu_01 ">
<ul><li><a href="#">Trang chủ</a>
</li></ul>

<ul><li><a href="#">Tin tức</a>
<ul>
<li><a href="#" >Tin tổng hợp</a></li>
<li><a href="#" >Tin nóng</a></li>
<li><a href="#" >Tin chuối</a></li>
</ul>
</li></ul>

<ul><li><a href="#">Phần mềm</a>
<ul>
<li><a href="#" >Phần mềm văn phòng</a></li>
<li><a href="#" >Phần mềm đồ họa</a></li>
<li><a href="#" >Phần mềm bảo mật</a></li>
<li><a href="#" >Phần mềm online</a></li>
</ul>
</li></ul>

<ul><li><a href="#">Thư viện E-book</a>
<ul>
<li><a href="#" >E-book CNTT</a></li>
<li><a href="#" >E-book dành cho sinh viên</a></li>
</ul>
</li></ul>

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

<ul><li><a href="#">Blog</a>
</li></ul>
</div>

Đoạn mã menu bạn dán vào chỗ mà bạn muốn hiển thị trên trang web. Đối với trang UCOZ bạn có thể dáng váo phần top part of the website. Bạn có thể thay đổi tên menu trong đoạn mã trên cho phù hợp với site của bạn.