Membuat Dropdown Menu Animasi Responsive Dengan CSS3

Navigasi menu dropdown dengan fade in dan animasi cantik untuk geser sub menu ke atas. CSS animasi menu ini berjalan baik di semua browser modern termasuk Internet Explorer.

Menu ini juga memiliki border-radius dan box-shadow yang dapat terlihat sempurna dalam IE9 +

Untuk browser Safari yang digunakan pada handphone, iPad dll sub menu dapat ditutup dengan menekan layar dimana saja. Untuk lebih jelasnya silahkan coba Live Demo di Bawah ini:

LIVE DEMO - Membuat Dropdown Menu Animasi Responsive Dengan CSS3

<div class="menu">
  <ul>
    <li><a href="#">Home</a></li>
    <li><a href="#url">Services</a>
    <ul>
      <li>
        <span><a href="#">Printing &amp; Framing</a>
        <span><a href="#">Photo Editing</a>
        <span><a class="last" href="#">Storage &amp; Backup</a>
        </span></span></span>
      </li>
    </ul></li>
    <li><a href="#url">Contacts</a>
    <ul>
      <li>
        <span><a href="#">Support</a>
        <span><a href="#">Sales</a>
        <span><a href="#">Buying</a>
        <span><a href="#">Photographers</a>
        <span><a href="#">Stockist</a>
        <span><a class="last" href="#">General</a>
        </span></span></span></span></span></span>
      </li>
    </ul></li>
    <li><a href="#url">Stores Location</a>
    <ul>
      <li>
        <span><a href="#">South West Region</a>
        <span><a href="#">North East Region</a>
        <span><a class="last" href="#">Central Region</a>
        </span></span></span>
      </li>
    </ul></li>
    <li><a href="#url">Contact Us</a>
    <ul>
      <li>
        <span><a href="#">Email Addresses</a>
        <span><a href="#">By Post</a>
        <span><a class="last" href="#">Telephone Numbers</a>
        </span></span></span>
      </li>
    </ul></li>
    <li><a href="#url"> Sales </a>
    <ul>
      <li>
        <span><a href="#">Digital SLR Cameras</a>
        <span><a href="#">Interchangeable Lenses</a>
        <span><a href="#">Flash Guns &amp; Accessories</a>
        <span><a href="#">Professional Tripods</a>
        <span><a class="last" href="#">Filters &amp; Lens Hoods</a>
        </span></span></span></span></span>
      </li>
    </ul></li>
    <li><a href="#">Privacy Policy</a></li>
  </ul>
</div>

/* Responsive Nav Menu Copyright @ ajatshare.blogspot.com */
.menu {position:relative; z-index:100;}
.menu ul {padding:0; margin:0;list-style:none; font-family: 'arial', sans-serif; font-size:14px;}
.menu > ul {height:35px; background:#555; border-radius:5px 5px 0 0; box-shadow:0 15px 10px -15px rgba(0,0,0,0.6);}
.menu > ul > li {float:left; position:relative; white-space:nowrap;}
.menu > ul > li > a {line-height:35px; height:35px; display:block; margin-top:0; padding:0 10px; color:#fff; text-decoration:none; background:#555; border-radius:5px 5px 0 0;
-webkit-transition: 0.5s;
-moz-transition: 0.5s;
-ms-transition: 0.5s;
-o-transition: 0.5s;
transition: 0.5s;
}
.menu ul ul {position:absolute; left:-9999px; top:36px; margin-top:40px;
-webkit-transition: 0s 0.75s;
-moz-transition: 0s 0.75s;
-ms-transition: 0s 0.75s;
-o-transition: 0s 0.75s;
transition: 0s 0.75s;
}
.menu ul ul li span a {display:block; float:left; height:30px; width:160px; line-height:30px; background:#69c; padding:0 10px; color:#fff; text-decoration:none; margin-top:50px;
box-shadow:0 10px 10px -10px rgba(0,0,0,0.7);
-webkit-transition: 0s 0.75s; 
-moz-transition: 0s 0.75s; 
-ms-transition: 0s 0.75s; 
-o-transition: 0s 0.75s; 
transition: 0s 0.75s; 
}
.menu ul ul li span a.last {border-radius:0 0 5px 5px;}
.menu ul li:hover {z-index:100;}
.menu > ul > li:hover > a {background:#69c; margin-top:-4px; height:40px;
 box-shadow:0 10px 10px -10px rgba(0,0,0,0.7);
 }
.menu ul li:hover ul {left:0; width:180px; margin-top:0;
-webkit-transition: margin 0.25s;
-moz-transition: margin 0.25s;
-ms-transition: margin 0.25s;
-o-transition: margin 0.25s;
transition: margin 0.25s;
}
.menu ul ul li span {display:block; opacity:0;
-webkit-transition: 0.5s 0.25s;
-moz-transition: 0.5s 0.25s;
-ms-transition: 0.5s 0.25s;
-o-transition: 0.5s 0.25s;
transition: 0.5s 0.25s;
}
.menu ul li:hover ul li span {opacity:1;
-webkit-transition:0.75s;
-moz-transition:0.75s;
-ms-transition:0.75s;
-o-transition:0.75s;
transition:0.75s;
}
.menu ul li:hover ul li span a {margin-top:0;
-webkit-transition:0.75s;
-moz-transition:0.75s;
-ms-transition:0.75s;
-o-transition:0.75s;
transition:0.75s;
}
.menu ul li:hover ul li span a:hover {background:#555;}
.menu ul + img {position:fixed; left:0; top:0; width:0; height:0; z-index:-1;}
.menu ul:hover + img {width:100%; height:100%;}