Thực hành viết menu đa cấp bằng CSS

Minh họa về menu đa cấp

☀ Các thành phần html cần dùng.

Để tạo menu đa cấp, chúng ta sẽ sử dụng thẻ <ul> <li> để tạo từng mục trong menu đó. 

<div id="menu_top">

  <ul>

    <li><a href="#">Home</a></li>

    <li><a href="#">About</a></li>

    <li>

       <a href="#">Product</a>

       <ul>

           <li>

              <a href="#">Product cat 1</a>

              <ul>

                                         <li><a href="#">Product cat 1.1</a></li>   

                  <li><a href="#">Product cat 1.2</a></li>   

              </ul>

          </li> 

          <li><a href="#">Product cat 2</a></li>   

       </ul>

    </li>

    <li><a href="#">Contact</a></li>   

  </ul>

</div>

☀ Css cho các thành phần html.

Ta tạo các thẻ css theo tên đặt của thành phần html ở trên. 

#menu_top{
       css cho khung ngoài cùng của menu
}
#menu_top ul{

    css ở thẻ ul trong khung menu

}

#menu_top ul li{

    css thẻ li là con của thẻ ul nằm trong khung menu

}

#menu_top ul li a{

     css thẻ a là con của thẻ li và là con của thẻ ul nằm trong khung menu

}

#menu_top ul li ul{

     css thẻ ul là con của thẻ li và là con của thẻ ul nằm trong khung menu

}

#menu_top ul li ul li{

     css thẻ li là con của thẻ ul và là con của thẻ li và con của thẻ ul nằm trong khung menu

}

#menu_top ul li ul li a{

     css thẻ a là con của thẻ li và là con của thẻ ul và là con của thẻ li và con của thẻ ul nằm trong khung menu

}

Click xem video chi tiết cách tạo menu đa cấp

Chúc các bạn thành công !