1MB Club

Minimal CSS: Dropdown Menu

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:

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.

Special Thanks

I'm extremely grateful for the support from the "Hall of Fame" supporters:
adast.dk alessandrocuzzocrea.com alexeystar.com arc-x.org artemislena.eu b0ba.dev cmc.pub danielsada.tech dieses-veganismus.de gtrr.artemislena.eu iosis-labs.com jakobmagnusson.se jamieonkeys.dev kristianscott.co.uk lukealexdavis.co.uk miniskirt.me next.gen.oh.us/~anton/ nicksherman.com simone.org t0.vc tedmagaoay.com willem.com wonger.dev xslendi.xyz zoraster.org

If you too would like to support this project and help fund more articles like this one:
Become a supporter today →