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