Tạo menu dropdown đa cấp khi rê chuột vào bằng CSS

Như các bạn thấy ở hình trên, một menu dropdown đa cấp, được làm hoàn toàn từ CSS, thật tuyệt vời phải không nào. Muốn làm được như vậy, đọc bài hướng dẫn hôm nay nhé.

Các bước thực hiện

Bước 1: Truy cập blogger.com > chủ đề > chỉnh sửa html
Bước 2: Chèn đống css này lên trên ]]></b:skin>

* {margin:0;padding:0}
nav menuitem{position:relative;display:block;opacity:0;cursor:pointer}
nav menuitem > menu{position:absolute;pointer-events:none}
nav > menu{display:flex}
nav > menu > menuitem{pointer-events:all;opacity:1}
menu menuitem a{white-space:nowrap;display:block}
menuitem:hover > menu{pointer-events:initial}
menuitem:hover > menu > menuitem,menu:hover > menuitem{opacity:1}
nav > menu > menuitem menuitem menu{transform:translateX(100%);top:0;right:0}
nav{margin-top:40px;margin-left:40px}
nav a{background:#75F;color:#FFF;min-width:190px;transition:background 0.5s,color 0.5s,transform 0.5s;margin:0 6px 6px 0;padding:20px 40px;box-sizing:border-box;border-radius:3px;box-shadow:0 2px 4px rgba(0,0,0,0.5);position:relative}
nav a:hover:before{content:'';top:0;left:0;position:absolute;background:rgba(0,0,0,0.2);width:100%;height:100%}
nav > menu > menuitem > a + menu:after{content:'';position:absolute;border:10px solid transparent;border-top:10px solid white;left:12px;top:-40px}
nav menuitem > menu > menuitem > a + menu:after{content:'';position:absolute;border:10px solid transparent;border-left:10px solid white;top:20px;left:-180px;transition:opacity 0.6,transform 0s}
nav > menu > menuitem > menu > menuitem{transition:transform 0.6s,opacity 0.6s;transform:translateY(150%);opacity:0}
nav > menu > menuitem:hover > menu > menuitem,nav > menu > menuitem.hover > menu > menuitem{transform:translateY(0%);opacity:1}
menuitem > menu > menuitem > menu > menuitem{transition:transform 0.6s,opacity 0.6s;transform:translateX(195px) translateY(0%);opacity:0}
menuitem > menu > menuitem:hover > menu > menuitem,menuitem > menu > menuitem.hover > menu > menuitem{transform:translateX(0) translateY(0%);opacity:1}

Bước 3: Chèn HTML vào nơi cần hiển thị

<nav>
  <menu>
   <menuitem id="demo1">
    <a>drop</a>
    <menu>
     <menuitem><a>about</a></menuitem>
               <menuitem>
                  <a>settings</a>
                  <menu>
                     <menuitem><a>Test 1</a></menuitem>
                     <menuitem><a>Test 2</a></menuitem>
                     <menuitem><a>Test 3</a></menuitem>
                     <menuitem><a>Test 4</a></menuitem>
                  </menu>  
               </menuitem>
     <menuitem><a>help</a></menuitem>
     <menuitem id="demo2">
      <a>more</a>
      <menu>
       <menuitem id="demo3">
        <a>deeper</a>
        <menu>
         <menuitem><a>deep 1</a></menuitem>
         <menuitem><a>deep 2</a></menuitem>
         <menuitem><a>deep 3</a></menuitem>
        </menu>
       </menuitem>
       <menuitem><a>test</a></menuitem>
      </menu>
     </menuitem>
    </menu>
   </menuitem>
  </menu>
 </nav>

Bước 4: Chỉnh sửa cho phù hợp, rồi lưu template lại.

Tổng kết

Chỉ với một đoạn ngắn CSS và HTML đặc biệt đã tạo ra một menu dropdown đa cấp đầy đặc sắc phải không nào, chúc các bạn thành công. Nếu có gì thắc mắc comment bên dưới nhé