Your cart is currently empty!
[Tutorial] Add CSS-only Dropdown Menu in WordPress Theme from scratch
Sometimes HTML version of the theme doesn’t come with dropdown menu in menu bar, here is a simple way to add dropdown menu to your HTML:
Add the following HTML to your markup
<nav> <ul> <li><a href="#">Home</a></li> <li><a href="#">WordPress</a> <!-- First Tier Drop Down --> <ul> <li><a href="#">Themes</a></li> <li><a href="#">Plugins</a></li> <li><a href="#">Tutorials</a></li> </ul> </li> <li><a href="#">Graphic Design</a></li> <li><a href="#">Inspiration</a></li> <li><a href="#">Contact</a></li> <li><a href="#">About</a></li> </ul> </nav>h
Note that dropdown is simply adding <ul> into <li> of the first level.
After that, here is the explanation of the following CSS:
- Hide ul ul in menu (which is dropdown level)
- Show hidden dropdown menu in ul li:hover ul
- Adjust the dropdown menu width with ul ul li
- Position 2nd+ tier dropdown with ul ul ul (Untested)
You can see my code below. Feel free to adapt to your own menu.
/* Normal Menu CSS */ #nav-wrapper ul { float: none; margin: 0 auto; text-align: center; } #nav-wrapper ul li { float: none; display: inline-block; text-align: center; margin-right: 35px; } #nav-wrapper ul li a { color: #404040; font-size: 15px; } /* Dropdown Menu CSS */ #nav-wrapper ul ul { display: none; position: absolute; top: 100%; left: 0; margin: 0; padding: 0; } #nav-wrapper ul li { position: relative; } #nav-wrapper ul li:hover > ul { display: block; } #nav-wrapper ul ul li { min-width: 170px; background: #fff; margin-right: 0; padding: 10px 15px; display: block; text-align: left; } #nav-wrapper ul ul li:last-child { padding-bottom: 20px; } #nav-wrapper ul ul ul { position: absolute; top:0; left:100%; }
P.S. Add responsive CSS as you wished.
Credit: HTML is from https://webdesignerhut.com/css-dropdown-menu/ and my CSS code is adaptation of the code in this tutorial.
by
Tags:
Leave a Reply