How to Build a Dropdown Menu Using Pure HTML and CSS

Here is how to make a bare bones dropdown navigation menu using only CSS and HTML. There are more complicated ways of doing this using JQuery, but I've found this method a lot easier. I pulled code from a variety of sources — the CSS mostly came from here.

Source Code

HTML

1<ul class="nav-ul">
2  <li class="nav-li">
3    <a class="nav-a" href="#">Work &#9662;</a>
4    <ul class="nav-ul dropdown">
5      <li class="nav-li"><a href="#">Apps</a></li>
6      <li class="nav-li"><a href="#">Projects</a></li>
7      <li class="nav-li"><a href="#">School Projects</a></li>
8    </ul>
9  </li>
10  <li class="nav-li"><a class="nav-a" href="#">Contact</a></li>
11</ul>
12

CSS

1.nav-ul{
2    /*padding: 0;*/
3    list-style: none;
4    background: #f2f2f2;
5}
6.nav-ul .nav-li{
7    display: inline-block;
8    position: relative;
9    line-height: 21px;
10    /*text-align: left;*/
11}
12.nav-ul .nav-li .nav-a{
13    display: block;
14    padding: 8px 25px;
15    color: #333;
16    text-decoration: none;
17}
18.nav-ul .nav-li .nav-a:hover{
19    color: #fff;
20    background: #939393;
21}
22.nav-ul .nav-li .nav-ul.dropdown{
23    min-width: 125px; /* Set width of the dropdown */
24    background: #f2f2f2;
25    display: none;
26    position: absolute;
27    z-index: 999;
28    left: 0;
29}
30.nav-ul .nav-li:hover .nav-ul.dropdown{
31    display: block; /* Display the dropdown */
32}
33.nav-ul .nav-li .nav-ul.dropdown .nav-li{
34    display: block;
35}
36

Hope this helps!