HTML Dropdown Menu with CSS3 Animation

By w3iscool, October 13, 2015

Navigation or Dropdown menu is one of the most important elements for a website. In this tutorial we will create a simple html Dropdown menu with CSS3 Transition Animation.

This is simple Horizontal Dropdown menu, sub-menu will display with mouse hover on item with CSS3 Animation.

Demo   Download Source

The HTML

Lets start with html part create an unordered List and wrap each item in a link element. Now create sub-menu markup in same way inside of li(list) where you want to place sub-menu and add class in ul “sub-menu”.

<nav>
<ul class="menu">
  <li><a href="home">Home</a></li>
  <li>
    <a href="#"  class="arrow">Tips &amp; Tutorials</a>
    <ul class="sub-menu">
      <li><a href="#">Keyboard Shortcuts</a></li>
      <li><a href="#">HTML/CSS</a></li>
      <li><a href="#">WordPress</a></li>
      <li><a href="#">JQuery</a></li>
    </ul>
  </li>
  <li>
    <a href="#"  class="arrow">Freebies</a>
    <ul class="sub-menu">
      <li><a href="#">Html Templates</a></li>
      <li><a href="#">Templates(psd)</a></li>
      <li><a href="#">UI Kits</a></li>
      <li><a href="#">Icons</a></li>
    </ul>
  </li>
  <li><a href="#">Tech News</a></li>
  <li><a href="#">Contact</a></li>
</ul>
</nav>

Your html part will look like this. We have used nav tag from html 5 and unordered list for navigation.

The CSS

Now time to makeover our html structure with CSS.

*{margin: 0;padding: 0;}
body {
  font-family: 'lato', Helvetica, Arial, sans-serif;
  padding: 20px 50px 150px;
  font-size: 13px;
  text-align: center;
  background: #175690;
}
h1 {
  color: #fff;
  font-size: 30px;
  font-weight: normal;
  margin: 30px auto;
  width: 500px;
}
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;
  background: #fff;
  cursor: pointer;
}
ul li a{
  text-decoration: none;
  color: #000;  
  padding: 15px 20px;
  display: block;
  -webkit-transition: all 0.4s;
  -moz-transition: all 0.4s;
   transition: all 0.4s;
}
ul li a.arrow::after {
  border-left: 4px solid transparent;
  border-right: 4px solid transparent;
  border-top: 4px solid #333;
  content: "";
  position: absolute;
  right: 5px;
  top: 45%;
  z-index: 999;
  -webkit-transition: all 0.4s;
  -moz-transition: all 0.4s;
  transition: all 0.4s;
}
ul li:hover a.arrow::after {
  border-top-color: #fff;
}
ul li:hover a{
  background: #236bae;
  color: #fff;
}
ul li ul {
  padding: 0;
  position: absolute;
  top: 48px;
  left: 0;
  width: 160px;
  -webkit-box-shadow: 4px 1px 1px rgba(0, 0, 0, 0.3);
  -moz-box-shadow: 4px 1px 1px rgba(0, 0, 0, 0.3);
  box-shadow: 4px 1px 1px rgba(0, 0, 0, 0.3);
  opacity: 0;
  visibility: hidden;
}

Now main horizontal navigation ui will look like this. Give sub-menu position according navigation and make it hidden for visible on mouse hover.

Sub-menu styling and mouse hover animation

ul li ul li { 
  background: #236bae; 
  display: block; 
  color: #fff;
  height: 0px;
  overflow: hidden;
  -webkit-transiton: all 0.6s;
  -moz-transition: all 0.6s;
  transition: all 0.6s;
}
ul li:hover ul li{
  height: 48px;
}
ul li ul li:hover a{ background: #2073bf ; }
ul li:hover ul {
  display: block;
  opacity: 1;
  visibility: visible;
}

Making of simple and pure html css Dropdown menu is complete. You can use this html dropdown for your website. If like this post please share with your friend and follow us on social media for more update.

Learn How to create Jquery Dropdown Toggle menu.

 

Demo   Download Source