Minimal CSS: Dropdown Menu
2019-04-26
I love the idea of stripping away as much CSS as possible, while still maintaining the original UI concept. Let's build out a demo example with a simple menu dropdown element.
Interesting facts about our final CSS menu:
- Total weight 121 bytes minified! (not including any resets etc.)
- No complex HTML structures
- Accessibility support
Now to see the final code in all it's glory:
HTML
<nav>
<ul>
<li><a href="">Home</a></li>
<li><a href="">About</a></li>
<li><a href="">Services</a>
<ul>
<li><a href="">Design</a></li>
<li><a href="">Development</a></li>
<li><a href="">Custom Pizzas</a></li>
</ul>
</li>
<li><a href="">Contact</a></li>
</ul>
</nav>
CSS
/* resets - optional */
ul { list-style: none; padding: 0; }
ul li { display: inline-block; position: relative; }
/* minimal dropdown CSS */
ul li > ul {
left: -9999px;
position: absolute;
visibility: hidden;
}
ul li:hover > ul, ul li:focus-within > ul {
left: 0;
visibility: visible;
}
Live demo on CodePen
Feel free to check out the live demo on CodePen here.