Dropdown Navigation Menu Responsive Cross Browser

Dropdown Navigation Menu Responsive Cross Browser dengan animasi yang cakep yang dapat tampil sempurna di Firefox 4, Opera, Safari, Chrome, iPad, iPhone dan iPod Touch. Browser membuka sub menu dengan alay,.. maksudnya delay ,.. :D untuk mencegah dropdowns tertutup, jadi ketika mouse bergerak (ke sub menu atau lainnya) yang punya sedikit jarak, akan menjaga drop down sub menu tidak tertutup secara tiba-tiba.

Drop down menu akan menghasilkan popup tab “close x” saat tampil di Touch iPad, iPhone dan iPod di atas top level menu yang dapat dimanfaatkan untuk menutup struktur menu. Untuk lebih jelasnya silahkan coba Live Demo di bawah ini:

LIVE DEMO - Dropdown Navigation Menu Responsive Cross Browser

<div class="menus">
  <ul>
    <li><a href="#url">Home</a></li>
  </ul>
  <ul>
    <li><a class="fly" href="#url">Contact Us</a>
    <ul>
      <li><a href="#url">Email</a></li>
      <li><a href="#url">Telephone</a></li>
      <li><a href="#url">Online Form</a></li>
      <li><a href="#url">Snail Mail Address</a></li>
    </ul></li>
    <li class="close"><a href="#url">Close X</a></li>
  </ul>
  <ul>
    <li><a class="fly" href="#url">Resort</a>
    <ul>
      <li><a href="#url">Ski Hire Facilities</a></li>
      <li><a class="fly" href="#url">Main Ski Slopes</a>
      <ul>
        <li class="p1"><a href="#url">Beginners Slopes</a></li>
        <li><a href="#url">Intermediate Slopes</a></li>
        <li><a class="fly" href="#url">Advanced Skills</a>
        <ul>
          <li class="p1"><a href="#url">Local</a></li>
          <li><a href="#url">Nearby</a></li>
          <li><a href="#url">With instructor</a></li>
          <li><a href="#url">Snow boarding</a></li>
        </ul></li>
        <li><a href="#url">Expert</a></li>
      </ul></li>
      <li><a href=#url">Night Life</a></li>
      <li><a class="fly" href="#url">Restaurants</a>
      <ul>
        <li class="p1"><a href="#url">Snow Hotel</a></li>
        <li><a href="#url">The Snowman</a></li>
        <li><a href="#url">Ice Cavern</a></li>
        <li><a href="#url">Ski Inn</a></li>
      </ul></li>
      <li><a class="fly" href="#url">Car Hire</a>
      <ul>
        <li class="p1"><a href="#url">From Airport</a></li>
        <li><a href="#url">In Resort</a></li>
        <li><a href="#url">Multiple Resorts</a></li>
      </ul></li>
    </ul></li>
    <li class="close"><a href="#url">Close X</a></li>
  </ul>
  <ul>
    <li><a class="fly" href="#url">Surrounding Area</a>
    <ul>
      <li><a href="#url">Where to go</a></li>
      <li><a href="#url">What to do</a></li>
      <li><a href="#url">Places of interest</a></li>
      <li><a href="#url">Parks &amp; Museums</a></li>
    </ul></li>
    <li class="close"><a href="#url">Close X</a></li>
  </ul>
  <ul>
    <li><a class="fly" href="#url">Information</a>
    <ul>
      <li><a href="#url">Money Exchange</a></li>
      <li><a href="#url">Resort Information</a></li>
      <li><a href="#url">Language</a></li>
      <li><a href="#url">Short Breaks</a></li>
    </ul></li>
    <li class="close"><a href="#url">Close X</a></li>
  </ul>
</div>

/* Copyright http://ajatshare.blogspot.com */
.menus {height:50px; position:relative;}
.menus ul {padding:0; margin:0; list-style:none; width:150px; float:left;}
.menus ul ul {position:absolute; z-index:-1;
-webkit-transition: 0.5s;
-moz-transition: 0.5s;
-ms-transition: 0.5s;
-o-transition: 0.5s;
transition: 0.5s;
transition-delay: 0.5s;
-o-transition-delay: 0.5s;
-moz-transition-delay: 0.5s;
-ms-transition-delay: 0.5s;
-webkit-transition-delay: 0.5s;
}
.menus ul ul ul {position:absolute; left:150px; top:0;}
.menus ul ul ul.rgt {position:absolute; left:auto; right:150px; top:0;}
.menus ul li {float:left; width:150px; position:relative; z-index:10; 
-webkit-transition: 0.25s;
-moz-transition: 0.25s;
-ms-transition: 0.25s;
-o-transition: 0.25s;
}
.menus ul ul li {
transition-delay: 1s;
-o-transition-delay: 1s;
-moz-transition-delay: 1s;
-ms-transition-delay: 1s;
-webkit-transition-delay: 1s;
}
.menus ul ul ul li {
transition-delay: 0.5s;
-o-transition-delay: 0.5s;
-moz-transition-delay: 0.5s;
-ms-transition-delay: 0.5s;
-webkit-transition-delay: 0.5s;
}
.menus ul li a {display:block; width:139px; height:29px; padding-left:10px; background:#006699; font:normal 12px/29px arial, sans-serif; color:white; text-decoration:none; margin-bottom:1px; margin-right:1px;
-o-border-radius: 10px;
-moz-border-radius: 10px;
-ms-border-radius: 10px;
-webkit-border-radius: 10px;
border-radius: 10px;
}
.menus ul li a.fly {background:#006699 url(http://zifana.com/wp-content/uploads/2013/07/arrow-over.gif) no-repeat right center;}
.menus ul li:hover > a {background-color:#86A9D9; color:#fff;}
.menus ul li:hover > a.fly {background:#86A9D9 url(http://zifana.com/wp-content/uploads/2013/07/arrow.gif) no-repeat right center;}
.menus ul ul li {margin-top:-30px;}
.menus ul ul li.p1 {margin-top:0;}
.menus ul ul ul {margin-left:-150px;}
.menus ul li:hover > ul > li {margin-top:0;
transition-delay: 0.5s;
-o-transition-delay: 0.5s;
-moz-transition-delay: 0.5s;
-ms-transition-delay: 0.5s;
-webkit-transition-delay: 0.5s;
}
.menus ul ul li:hover > ul {margin-left:0;
transition-delay: 0s;
-o-transition-delay: 0s;
-moz-transition-delay: 0s;
-ms-transition-delay: 0s;
-webkit-transition-delay: 0s;
}
.menus ul li.close {margin-top:-30px; z-index:-1;}

@media (max-width:768px){
/* for iPhone, iPod Touch and iPad */
.menu ul li:hover + li.close {margin-top:-60px; z-index:0;}
}

Menu support untuk IE7, IE8, IE9 Firefox, Safari, Opera, Chrome, Flock, SeaMonkey, Avant, iPhone, iPod Touch dan iPad.