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 do that with a simple menu dropdown.

Interesting facts about our final CSS menu:

Total weight 121 bytes minified! (not including any …

I love the idea of stripping away as much CSS as possible, while still maintaining the original UI concept. Let’s do that with a simple menu dropdown.

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.


Print Share Comment Cite Upload Translate
APA
Bradley Taunt | Sciencx (2024-03-28T13:53:55+00:00) » Minimal CSS: Dropdown menu. Retrieved from https://www.scien.cx/2019/04/26/minimal-css-dropdown-menu/.
MLA
" » Minimal CSS: Dropdown menu." Bradley Taunt | Sciencx - Friday April 26, 2019, https://www.scien.cx/2019/04/26/minimal-css-dropdown-menu/
HARVARD
Bradley Taunt | Sciencx Friday April 26, 2019 » Minimal CSS: Dropdown menu., viewed 2024-03-28T13:53:55+00:00,<https://www.scien.cx/2019/04/26/minimal-css-dropdown-menu/>
VANCOUVER
Bradley Taunt | Sciencx - » Minimal CSS: Dropdown menu. [Internet]. [Accessed 2024-03-28T13:53:55+00:00]. Available from: https://www.scien.cx/2019/04/26/minimal-css-dropdown-menu/
CHICAGO
" » Minimal CSS: Dropdown menu." Bradley Taunt | Sciencx - Accessed 2024-03-28T13:53:55+00:00. https://www.scien.cx/2019/04/26/minimal-css-dropdown-menu/
IEEE
" » Minimal CSS: Dropdown menu." Bradley Taunt | Sciencx [Online]. Available: https://www.scien.cx/2019/04/26/minimal-css-dropdown-menu/. [Accessed: 2024-03-28T13:53:55+00:00]
rf:citation
» Minimal CSS: Dropdown menu | Bradley Taunt | Sciencx | https://www.scien.cx/2019/04/26/minimal-css-dropdown-menu/ | 2024-03-28T13:53:55+00:00
https://github.com/addpipe/simple-recorderjs-demo