Create multi-level dropdown menu on hover with CSS

https://abhishektipsntricks.blogspot.com/
Create multi-level dropdown menu on hover with CSS AbhishekTipsNtricks

As you can see in the image above, a multi-level dropdown menu, made entirely from CSS, is amazing. To do so, read today's tutorial.

                                                    Watch Demo

Steps to take

Step 1: Go to blogger.com > themes > edit html

Step 2: Insert this pile of css on top ]]></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}

Step 3 : Insert HTML where it needs to be displayed 

<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>

 Step 4: Edit accordingly, then save the template.

Summary


With just a short piece of special CSS and HTML, you can create a unique multi-level dropdown menu, good luck. If you have any questions, comment below

Post a Comment

Previous Post Next Post