Một số hướng dẫn ngắn các thủ thuật 1. Tạo menu ngang - CSS và HTML Code:

Sau khi ta viết mã HTML vào file menungang.html bạn ra ngoài chạy thử thì sẽ chưa thấy xuất hiện hình dạng một thanh menu ngang . Nên chúng ta sẽ viết một file CSS riêng bên ngoài rồi các bạn dẫn nó vào file HTML hoặc các bạn có thể viết trực tiếp trong phần thẻ <head> của file HTML. Còn mình thì sẽ tạo một file stylemenu.css và viết các lệnh CSS ở đó rồi dẫn nó vào file HTML cho nó chuyên nghiệp. Bên dưới là code CSS.


  1. menungang ul{

list-style-type:none; padding:0px; margin:0px; }

  1. menungang ul li{

display:inline; }

  1. menungang ul a{

text-decoration:none; width:129px; float:left; background:#000; color:#fff; font-weight:bold; text-align:center; line-height:35px; border-left:1px solid #fff;

}

2. Tạo menu ngang đa cấp:

Code html  trong trang chủ.

<html> <head> <title>Tạo menu ngang đa cấp</title> <link rel="stylesheet" href="style.css" type="text/css"> <meta http-equiv="Content-Type" content="text/html; charset=UTF-8"> </head> <body>

</body> </html>

Code trong trang CSS:

*{ margin: 0px; padding: 0px;}

li{ list-style: none;} a{text-decoration: none;color: #FFF;font-size: 16px;} .thietke{ thietke: both;} .wrapper{ width: 960px; height: 500px; background: #F8F8F8; margin: 0px auto; } .menu_chinh{ background: #00A69B; margin-top: 30px;} .menu_chinh>ul>li{ float: left;padding: 11px 27px; position: relative; border-right: 1px dotted #ACACAC;} .menu_chinh>ul>li:last-child{ border-right: none;} .menu_chinh>ul>li>ul{ display: none; position: absolute; background: #00A69B;top: 41px;width: 198px; left: 0px;} .menu_chinh>ul>li:hover ul{ display: block;} .menu_chinh ul li:hover{ background: #5F5C5C; transition: all 0.25s;} .menu_chinh>ul>li>ul>li{ padding: 5px 10px;} .menu_chinh>ul>li>ul>li{ border-bottom: 1px dotted #ACACAC;}

3. Tạo menu dọc đa cấp 1 Code của trang html:

Danh mục sản phẩm

  • <a href="#">Lap top</a>
  • <a href="#">Desktop</a>
  • <a href="#">Mobile phone </a>
  • <a href="#">Tai phone</a>
  • <a href="#">USB</a>
  • <a href="#">Loa</a>
  • <a href="#">Cáp</a>
  • <a href="#">Màn hình </a>
  • <a href="#">Website</a>
  • <a href="#">UPS</a>
  • <a href="#"> Bàn phím</a>


Code trang CSS:

  1. left{

width:165px; }

  1. left h1{

background:#99CC00; color:#FFFFFF; font-size:14px; text-align:center; }

  1. left ul{

list-style-type:none; margin:0px; padding:0px; }

  1. left ul a{

text-decoration:none; line-height:25px; color:#333333; background:#EEEEEE; display:block; width:150px; border-top:1px solid #FFFFFF; border-bottom:1px solid #CCCCCC; padding-left:15px; }

  1. left ul a:hover{

background:#FFCC99; }