Mẹo Vặt

Hướng dẫn làm menu đa cấp bằng CSS



Hướng dẫn làm menu đa cấp sử dụng hiệu ứng CSS3 cực đẹp
Các bạn có thể để lại email để nhận file code mẫu

– – – – – – – – – – – – – – – – – – – – – – – – – – – – – – – – – – –
Đăng ký kênh để nhận thông báo video mới nhất từ SUNTECH:
– – – – – – – – – – – – – – – – – – – – – – – – – – – – – – – – – – –
Link chi tiết các video học lập trình tại SUNTECH:
– – – – – – – – – – – – – – – – – – – – – – – – – – – – – – – – – – –
Các thẻ hash tag quan trọng của bài học
#hochtmlcss #hoclaptrinhweb #hoclaptrinhmienphi
– – – – – – – – – – – – – – – – – – – – – – – – – – – – – – – – – – –
Mọi chi tiết xin liên hệ:
Name: Phạm Kỳ Khôi
Email: daotaolaptrinhsuntech@gmail.com
Phone: 0942 668 586
Zalo: 0942 668 586
Website:
Facebook:
Group Facebook:

Nguồn: https://new-weekend.com/

Xem thêm bài viết khác: https://new-weekend.com/meo-vat/

23 Comments
  1. Huỳnh Tấn Lộc Official 3 months ago
    Reply

    cảm ơn anh!!!

  2. Huỳnh Trần Đình 3 months ago
    Reply

    Mình xin code: Huynhbkhn@gmail.com

  3. Thanh Hương Hoàng Thị 3 months ago
    Reply

    cho em xin file code mẫu vs ạ hoangsociu18@gmail.com

  4. Thái Trần 3 months ago
    Reply

    cho em xin code ạ: tranxuanthaimino@gmail.com

  5. Hoang Van Min 3 months ago
    Reply

    cho em xin code với ạ!
    mr.minhoan@gmail.com

  6. Phương Minh 3 months ago
    Reply

    cho em xin code với ak phuongnoo2001@gmail.com

  7. TopDataPS 3 months ago
    Reply

    video rất hay, e cảm ơn a nhiều

  8. Nguyễn Xuân 3 months ago
    Reply

    cho em xin code với ạ. nguyenxuan05101999@gmail.com

  9. Minh Hoàng 3 months ago
    Reply

    anh ơi, cho em xin code vs ạ. hoangminhzxzx@gmail.com ….. em code giống anh nhưng cái submenu không hiện ra khi em trỏ chuột vào li cha là sao vậy a, em cám ơn ạ

  10. Ly Nguyen 3 months ago
    Reply

    cho em xin file mẫu ạ : nguyenthilyly0903@gmail.com

  11. ThaoThao Tran 3 months ago
    Reply

    a ơi cho e xin code vs ạ: thaoat12@gmail.com

  12. Hoàng Anh Trần 3 months ago
    Reply

    cho em xin code voi a trannhoanh99@gmail.com

  13. Hùng Nguyễn 3 months ago
    Reply

    cho e xin code ạ. nguyenhung15112001@gmail.com .E cảm ơn ạ

  14. Thuan Truong Van 3 months ago
    Reply

    cho em xin code ạ: truongvanthuan45@gmail.com

  15. Minh Ngoc 3 months ago
    Reply

    Cho em xin code mẫu với ạ phuocducmaihong@gmail.com

  16. Trương Quang 3 months ago
    Reply

    cho em xin code ạh. quangklynk@gmail.com

  17. namduc nguyen 3 months ago
    Reply

    <!DOCTYPE html>

    <html>

    <head>

    <title>Hướng dẫn làm menu đa cấp bằng CSS</title>

    </head>

    <style>

    *{

    margin: 0;

    padding: 0;

    box-sizing: border-box;

    }

    body{

    font-family: sans-serif;

    font-size: 18px;

    }

    .container{

    width: 680px;

    height: 40px;

    background: #6d136a;

    margin: 50px auto;

    }

    ul.root > li {

    list-style: none;

    float: left;

    position: relative;

    }

    ul.root > li > a{

    text-decoration: none;

    color: #fff;

    padding: 0px 12px 0px 12px;

    line-height: 40px;

    display: block;

    }

    ul.root > li > a:hover{

    background-color: yellow;

    color: red;

    transform: ease-in 0.35s;

    }

    ul.submenu

    {

    width: 250px;

    background: #6d136a;

    min-height: 80px;

    display: none;

    position: absolute;

    }

    ul.submenu li

    {

    list-style: none;

    }

    ul.submenu li a

    {

    text-transform: none;

    text-decoration: none;

    color: #fff;

    display: block;

    border: 1px solid #ccc;

    line-height: 40px;

    text-indent: 10px;

    }

    ul.root > li:hover ul.submenu{

    display: block;

    background-color: #6d136a;

    color: red;

    transform: ease-in 0.35s;

    }

    ul.submenu li a:hover{

    background-color: yellow;

    color: red;

    transform: ease-in 0.35s;

    }

    </style>

    <body>

    <div class="container">

    <div class="menu" >

    <ul class="root">

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

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

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

    <ul class="submenu">

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

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

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

    </ul>

    </li>

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

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

    </ul>

    </div>

    </div>

    </body>

    </html>

  18. Thứ Huỳnh Tấn 3 months ago
    Reply

    huynhtanthuvip@gmail.com cho e xin file mẫu ạ. Thanks

  19. Thang Nguyen 3 months ago
    Reply

    cho e xin file mẫu với ạ toiluonlatoi100@gmail.com. a cho e hỏi thêm là trang của e xem trên máy tính thì rê chon trỏ vào sẽ hiện ra menu đa cấp, nhưng trên giao diện mobile thì e click vào sẽ hiện ra menu đấy, nhưng e click lần nữa nó ko mất đi ạ (phải nhấn chuột ra chỗ khác thì menu đa cấp mới thu lại), e ko biết e thiếu thuộc tính gì ạ, a có thể cho e biết được không ạ

  20. M N 3 months ago
    Reply

    Cho mình xin file psd ạ

  21. phuc Doan 3 months ago
    Reply

    ngocphuc1399@gmail.com cho e xin với ạ

  22. Tuấn Hồ Minh 3 months ago
    Reply

    cho em xin file ạ gmail: tuanho37na@gmail.com

  23. Đoàn Kiên 3 months ago
    Reply

    doankien99th@gmail.com
    Cho e xin code mẫu với ạ.
    Em cảm ơn

Leave a Comment

Your email address will not be published.

You may like