Create multi-level dropdown menu on hover with CSS
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 > 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 



   <menuitem id="demo1">







                     <menuitem><a>Test 1</a></menuitem>

                     <menuitem><a>Test 2</a></menuitem>

                     <menuitem><a>Test 3</a></menuitem>

                     <menuitem><a>Test 4</a></menuitem>




     <menuitem id="demo2">



       <menuitem id="demo3">



         <menuitem><a>deep 1</a></menuitem>

         <menuitem><a>deep 2</a></menuitem>

         <menuitem><a>deep 3</a></menuitem>










 Step 4: Edit accordingly, then save the template.


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


Popular posts from this blog

Get Free High PR Dofollow Backlinks Submit the word Free Backlink DA/PA By AbhishekTipsNtricks

Fletro Pro v6.1 Blogger Template Download

YouTube Vanced v16.16.38 Premium (No Ads) Apk