Pure CSS Onclick Dropdown Menu

This CSS code combined with a small amount of html will create an onclick dropdown menu. It uses NO javascript or jQuery. The CSS uses :focus to determine if a click was done. If :focus detected the dropdown menu is displayed by making it visible.


<style type="text/css">
.menu { position:relative; display:inline-block; z-index:2; padding:0; margin:0; outline:0; text-align:left; }
.menu:before { content: "\2630 \a0 Menu"; 
    color:white;
    padding: 5px 10px;
    border: 1px solid #555;
    border-radius:3px;
    background: #96305e;
    background: -moz-linear-gradient(top,  #96305e 0%, #822956 10%, #822956 90%, #751749 100%);
    background: -webkit-linear-gradient(top,  #96305e 0%,#822956 10%,#822956 90%,#751749 100%);
    background: linear-gradient(to bottom,  #96305e 0%,#822956 10%,#822956 90%,#751749 100%);
    filter: progid:DXImageTransform.Microsoft.gradient( startColorstr='#96305e', endColorstr='#751749',GradientType=0 );
}
.menu:focus { pointer-events:none; }
.menu:focus .menu-dropdown { opacity:1; visibility:visible; }

.menu-dropdown {
    background-color: #364656;
    width: auto;
    margin:3px 0 0 0;
    padding: 10px;
    border-radius:3px;
    border:1px black solid;
    border-radius:3px;
    pointer-events: auto;
    position: absolute;
    z-index: 1;
    opacity: 0;
    visibility: hidden;
    transition: visibility 1s;
    
    background: #1f8bd3;
    background: -moz-linear-gradient(top,  #1f8bd3 0%, #1b7aba 10%, #1b7aba 90%, #1b61b7 100%);
    background: -webkit-linear-gradient(top,  #1f8bd3 0%,#1b7aba 10%,#1b7aba 90%,#1b61b7 100%);
    background: linear-gradient(to bottom,  #1f8bd3 0%,#1b7aba 10%,#1b7aba 90%,#1b61b7 100%);
    filter: progid:DXImageTransform.Microsoft.gradient( startColorstr='#1f8bd3', endColorstr='#1b61b7',GradientType=0 );
}

.menu-dropdown a {
    background:transparent;
    border:none;
    outline:0;
    display:block;
    color:white;
    text-decoration:none;
    width:160px;
    padding:5px;
}
</style>

Example:

CSS
Use the code above

HTML: This accompanying HTML code is the drop down menu which becomes visible (drops down) when the user clicks the main menu button.

<div tabindex="0" class="menu">
    <div class="menu-dropdown">
        <a href="javascript:alert('Dropdown 1')">Dropdown 1</a>
        <a href="javascript:alert('Dropdown 2')">Dropdown 2</a>
        <a href="javascript:alert('Dropdown 3')">Dropdown 3</a>
        <a href="javascript:alert('No Javascript')">No Javascript</a>
    </div>
</div>

Produces this dropdown effect with NO javascript and NO jQuery: