How to create a drop down menu with HMTL and CSS?

In this article, we will create a drop down menu with HTML and CSS code, don't use any Javascript code.

The first, we add some HTML codes into the HTML file like this:

 <ul>
  <li>Home</li>
  <li>About</li>
  <li>
   Products
   <ul>
    <li>Web Design</li>
    <li>Web Development</li>
    <li>Illustrations</li>
   </ul>
  </li>
  <li>Blog</li>
  <li>Contact</li>
 </ul>
Copy this code


You can see that, we will create a menu with two levels, in the Product menu has some submenus, but they are hidden until we hover Product menu.

The second, we add some CSS code below to the style file or put them into style tag on header:

 body {
     font-family: "Lucida Grande", "Helvetica Neue", Helvetica, Arial, sans-serif;
     padding: 20px 50px 150px;
     font-size: 13px;
     text-align: center;
     background: #e3caa1;
    }

    ul {
     text-align: left;
     display: inline;
     margin: 0;
     padding: 15px 4px 17px 0;
     list-style: none;
     -webkit-box-shadow: 0 0 5px rgba(0, 0, 0, 0.15);
     -moz-box-shadow: 0 0 5px rgba(0, 0, 0, 0.15);
     box-shadow: 0 0 5px rgba(0, 0, 0, 0.15);
    }

    ul li {
     font: bold 12px/18px sans-serif;
     display: inline-block;
     margin-right: -4px;
     position: relative;
     padding: 15px 20px;
     background: #fff;
     cursor: pointer;
     -webkit-transition: all 0.2s;
     -moz-transition: all 0.2s;
     -ms-transition: all 0.2s;
     -o-transition: all 0.2s;
     transition: all 0.2s;
    }

    ul li:hover {
     background: #555;
     color: #fff;
    }

    ul li ul {
     padding: 0;
     position: absolute;
     top: 48px;
     left: 0;
     width: 150px;
     -webkit-box-shadow: none;
     -moz-box-shadow: none;
     box-shadow: none;
     display: none;
     opacity: 0;
     visibility: hidden;
     -webkit-transiton: opacity 0.2s;
     -moz-transition: opacity 0.2s;
     -ms-transition: opacity 0.2s;
     -o-transition: opacity 0.2s;
     -transition: opacity 0.2s;
    }

    ul li ul li {
    background: #555;
    display: block;
    color: #fff;
     text-shadow: 0 -1px 0 #000;
    }

    ul li ul li:hover {
   
   background: #666;
 
  }

    ul li:hover ul {
     display: block;
     opacity: 1;
     visibility: visible;
    }
Copy this code


© 2019 4codev

Created with love by Sil.