How To Create Simple CSS3 DropDown Menu

A Navigation Menu usually known as which drop us to different categories of a Blog or Website. It's also one of the most important element of the website to implement navigation menu. All most lot of the blogs are given already navigation menu tutorials. So i think you might like this menu I have brought here.

Live Demo

This navigation menu is used simple codes. So there is no more hard work to implement this menu. Creating navigation menu is silly mater in these days, anyway check out my new navigation menu..

HTML

<ul id="navigation">

    <li>
        <a href="index.html" class="main">Home</a>
    </li>
    
    <li>
        <a href="#" class="main">Social Media</a>
        <div class="sub-nav-wrapper"><ul class="sub-nav">
            <li><a href="#">Twitter</a></li>
            <li><a href="#">Google+</a></li>
            <li><a href="#">Facebook</a></li>
        </ul></div>
    </li>
    
    <li>
      <a href="#" class="main">Services</a>
        <div class="sub-nav-wrapper"><ul class="sub-nav">
            <li><a href="#">Blogger</a></li>
            <li><a href="#">Joomla</a></li>
 <li><a href="#">Drupal</a></li>
            <li><a href="#">Wordpress</a></li>
        </ul></div>
    </li>
    
    <li>
      <a href="#" class="main">Tutorial</a>
        <div class="sub-nav-wrapper"><ul class="sub-nav">
            <li><a href="#">JavaScript</a></li>
            <li><a href="#">HTML/CSS</a></li>
            <li><a href="#">Photoshop</a></li>
            <li><a href="#">Illustrator</a></li>
            <li><a href="#">Web Design</a></li>
        </ul></div>
    </li>
    
    <li>
      <a href="#" class="main">About</a>
        <div class="sub-nav-wrapper"><ul class="sub-nav">
            <li><a href="#">Blog</a></li>
            <li><a href="#">Team</a></li>
            <li><a href="#">Location</a></li>
        </ul></div>
    </li>
    
    <li>
      <a href="#" class="main">Contact</a>
    </li>
    
</ul>

CSS

a, #navigation li .sub-nav-wrapper .sub-nav li {
 transition: all 0.5s;
 -moz-transition: all 0.5s;
 -webkit-transition: all 0.5s;
}
#navigation li .sub-nav-wrapper {
 pointer-events: none;
 opacity: 0;
 filter: alpha(opacity=0);
 top: 0;
 
 transition: all 0.4s cubic-bezier(1,-5,0,0) 0s;
 -moz-transition: all 0.4s cubic-bezier(1,-5,0,0) 0s;
 -webkit-transition: all 0.4s cubic-bezier(1,-5,0,0) 0s;
}
#navigation li:hover .sub-nav-wrapper {
 pointer-events: auto;
 opacity: 1;
 filter: alpha(opacity=100);
 top: 30px;
}
#navigation {
 position: relative;
 text-align:center;
 margin:0 auto;
 background-color:#fff;
 border-bottom: 2px solid red;
}
#navigation li {
 position: relative;
 list-style: none;
 display: inline-block;
 padding: 5px 20px;
}
#navigation li a {
 padding: 5px;
 display: block;
 
 font-family: 'Open Sans', Arial, Helvetica, sans-serif;
 font-size: 14px;
 font-weight: 700;
 color: #3b3b3b;
 text-align: left;
 text-shadow: 1px 1px 0 rgba(255,255,255,0.25);
}
#navigation li:hover .main {
 color: #ee4e1d;
}
#navigation li .sub-nav-wrapper {
 display: block;
 position: absolute;
 z-index: 30;
 margin-left: -16px;
}
#navigation li .sub-nav-wrapper .sub-nav {
 width: 150px;
 margin-top: 6px;
 background: #fff;
 border-top: 1px solid #fff;
 padding:0;
 box-shadow: 0 1px 2px rgba(0,0,0,0.35);
 -moz-box-shadow: 0 1px 2px rgba(0,0,0,0.35);
 -webkit-box-shadow: 0 1px 2px rgba(0,0,0,0.35);
}
#navigation li:hover .sub-nav-wrapper {
 display: block;
}
#navigation li .sub-nav-wrapper .sub-nav li {
 list-style: none;
 display: block;
 margin: 0;
 padding: 0;
 text-align: left;
 border-bottom: 1px solid #F8B3B3;
}
#navigation li .sub-nav-wrapper .sub-nav li:last-child {
 border: none;
}
#navigation li .sub-nav-wrapper .sub-nav li a {
 display: block;
 padding: 11px 20px;
 font-size: 12px;
 font-weight: 600; 
}
#navigation li a:hover {
color: white;
}
#navigation li .sub-nav-wrapper .sub-nav li:hover {
 background: #FA7B7B;
 border-bottom: 1px solid red;
 color: #3b3b3b;
 text-decoration: none;
}

SHARE

Tweet