[[!meta title="Minimal CSS: Dropdown Menu"]]
[[!meta date="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](https://codepen.io/bradleytaunt/pen/MRLevy).