CSS Drop Down Menu Without Javascript

Lightweight and Pure CSS Drop Down Menu without Javascript

The menu is created in CSS3 which consists of a nested ul structure to create the second level of the menu. Just copy the below code below to give your website a beautiful, light-weight and flexible Drop down Menu.

HTML Code for CSS Drop Down Menu

<cssmenu>
<ul class="cf">
<li><a href="#">Menu 1</a></li>
<li><a class="dropdown" href="#">Menu 2</a>
<ul>
<li><a href="#">Sub Menu 1</a></li>
<li><a href="#">Sub Menu 2</a></li>
<li><a href="#">Sub Menu 3</a></li>
</ul>
</li>
<li><a href="#">Menu 3</a></li>
<li><a href="#">Menu 4</a></li>
</ul>
</cssmenu>

CSS Code for Drop Down Menu

cssmenu ul {
 text-shadow:0 1px 0 #FFF;
    background: #ddd;
    list-style: none;
    margin: 0;
    padding: 0;
    width: 100%;
}
cssmenu li {
    float: left;
    margin: 0;
    padding: 0;
    position: relative;
    min-width: 24.5%;
}
cssmenu a {
    background: #ddd;
    color: #444;
    display: block;
    font: bold 16px/50px sans-serif;
    padding: 0 25px;
    text-align: center;
    text-decoration: none;
    -webkit-transition: all .30s ease;
    -moz-transition: all .30s ease;
    -ms-transition: all .30s ease;
    -o-transition: all .30s ease;
    transition: all .30s ease;
}
cssmenu .dropdown:after {
    content: &#39; ▶&#39;;
}
cssmenu .dropdown:hover:after{
 content:&#39;\25bc&#39;
}
cssmenu li:hover a {
    background: #ccc;
}
cssmenu li ul {
    float: left;
    left: 0;
    opacity: 0;
    position: absolute;
    top: 35px;
    visibility: hidden;
    z-index: 1;
    -webkit-transition: all .30s ease;
    -moz-transition: all .30s ease;
    -ms-transition: all .30s ease;
    -o-transition: all .30s ease;
    transition: all .30s ease;
}