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


<ul class="nav-ul">
  <li class="nav-li">
    <a class="nav-a" href="#">Work &#9662;</a>
    <ul class="nav-ul dropdown">
      <li class="nav-li"><a href="#">Apps</a></li>
      <li class="nav-li"><a href="#">Projects</a></li>
      <li class="nav-li"><a href="#">School Projects</a></li>
  <li class="nav-li"><a class="nav-a" href="#">Contact</a></li>


    /*padding: 0;*/
    list-style: none;
    background: #f2f2f2;
.nav-ul .nav-li{
    display: inline-block;
    position: relative;
    line-height: 21px;
    /*text-align: left;*/
.nav-ul .nav-li .nav-a{
    display: block;
    padding: 8px 25px;
    color: #333;
    text-decoration: none;
.nav-ul .nav-li .nav-a:hover{
    color: #fff;
    background: #939393;
.nav-ul .nav-li .nav-ul.dropdown{
    min-width: 125px; /* Set width of the dropdown */
    background: #f2f2f2;
    display: none;
    position: absolute;
    z-index: 999;
    left: 0;
.nav-ul .nav-li:hover .nav-ul.dropdown{
    display: block; /* Display the dropdown */
.nav-ul .nav-li .nav-ul.dropdown .nav-li{
    display: block;

Hope this helps!

Posted in Web Development with HTML, CSS, Source Code