Pure CSS Dropdown Menu

A simple test using nesting features to demonstrate a purely css-made dropdown menu.

by Adam Howard

HTML

<div id="wrapper">
<div id="dropdown">
    <ul id="_link">
        <li class="links">Home</li>
        <li class="links">About</li>
        <li class="links">Software</li>
        <li class="links">Contact</li>
    </ul>
</div>
</div>

CSS

*{font-family: "Helvetica";}
body{background-color: black;}
#wrapper{width: 100%}

#dropdown {
    width: 50px; height: 50px;
    background-color: white;
    transition: 0.2s linear;
    margin: 0 auto;
    border-radius: 25px;
}

#dropdown:hover {
    background-color: black;
    cursor: pointer;
    height: 25px;
    width: 25px;
}


.links {
    margin-left: -100px;
    font-size: 0;
    padding: 0;
    list-style: none;
    color: white;
    background-color: #444444;
    opacity: 0;
    width: 0;
    text-align: center;
}

#dropdown:hover > ul > li{
    transition: 0.4s ease;
    opacity: 1;
    width: 100px;
    font-size: 16px;
    padding: 10px;
}

.links:hover {
    background-color: #222222;
    color: white;
}

.links:active {
    box-shadow: 0 6px 12px 4px black inset;
    font-size: 12px;
}