Animated Single Level dropdown menu (2) with css3 transition

Animated single level dropdown menu ini sekalipun terlihat hampir sama dengan menu sebelumnya (Animated Single Level dropdown menu (1) ), namun sebenarnya menggunakan teknik dan trik pengolahan kode css yang sedikit berbeda. Jika anda cermati dengan baik, maka akan sedikit terlihat juga hasil yang berbeda. Anda akan melihatnya ketika cursor diarahkan kesetiap menu dengan berbagai perpindahan. Mungkin anda sedikit bingung melihat perbedaannya, namun jika lebih cermat dan seksama pasti akan kelihatan juga. Mana yang lebih baik di antara kedua menu ini? Ha... tentu saja terserah anda karena semua tergantung selera!

Kode CSS

ul.GRddslanima-2, ul.GRddslanima-2 ul, ul.GRddslanima-2 li, ul.GRddslanima-2 li ul, ul.GRddslanima-2 ul li{
      padding:0;
      margin:0;
      list-style:none;
}
.myGRddslanima-2{
      position:relative;
      margin:0 20px;
      display:block;
      text-align:center; 
      margin:0 auto;
      background:black;
}
ul.GRddslanima-2 li{
      z-index:99;
      position:relative;
      float;left;
      display:inline-block;
      line-height:46px;
      background:rgba(0,0,0,.6);
}
ul.GRddslanima-2{
      background:#000 url(https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEinkNXeil522aAyuT8pZY77eqg-ICs1MTnIjK-bWzNFH6cQ8CEVy15Q2ijjUw6OQkkz8c_ZQ2zqrht8cIwVreI-hJsDl66PuPvPXKmMx9klrtMLlrnvRqit9KjWX9vdHVC9LJ0iREWkiSSZ/h120/bg-GRddslanima-2-light2.jpg) 50% -6px repeat;
}
ul.GRddslanima-2 li a{
      transition:0.6s;
      -o-transition:0.6s;
      -ms-transition:0.6s;
      -moz-transition:0.6s;
      -webkit-transition:0.6s;
      font-size:16px;
      font-family:Arial;
      text-decoration:none;
      color:#fff;
      padding:10px;
      background:#000 url(https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEinkNXeil522aAyuT8pZY77eqg-ICs1MTnIjK-bWzNFH6cQ8CEVy15Q2ijjUw6OQkkz8c_ZQ2zqrht8cIwVreI-hJsDl66PuPvPXKmMx9klrtMLlrnvRqit9KjWX9vdHVC9LJ0iREWkiSSZ/h120/bg-GRddslanima-2-light2.jpg) 50% -6px no-repeat;
}
ul.GRddslanima-2 li:hover a{
      background:red url(https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEinkNXeil522aAyuT8pZY77eqg-ICs1MTnIjK-bWzNFH6cQ8CEVy15Q2ijjUw6OQkkz8c_ZQ2zqrht8cIwVreI-hJsDl66PuPvPXKmMx9klrtMLlrnvRqit9KjWX9vdHVC9LJ0iREWkiSSZ/h120/bg-GRddslanima-2-light2.jpg) 50% -56px no-repeat;
}
ul.GRddslanima-2 li div ul{
      padding:10px 5px; 
      background:rgba(0,0,0,.4);
}
ul.GRddslanima-2 li div ul li{
      display:block; 
      line-height:30px;
      padding:0; 
}
ul.GRddslanima-2 li div ul li a:link{
      font-size:14px;
      display:block;
      background:green url(https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEinkNXeil522aAyuT8pZY77eqg-ICs1MTnIjK-bWzNFH6cQ8CEVy15Q2ijjUw6OQkkz8c_ZQ2zqrht8cIwVreI-hJsDl66PuPvPXKmMx9klrtMLlrnvRqit9KjWX9vdHVC9LJ0iREWkiSSZ/h120/bg-GRddslanima-2-light2.jpg) 50% -30px no-repeat;
      padding:0 10px;
}
ul.GRddslanima-2 li div ul li:hover a{
      background:blue url(https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEinkNXeil522aAyuT8pZY77eqg-ICs1MTnIjK-bWzNFH6cQ8CEVy15Q2ijjUw6OQkkz8c_ZQ2zqrht8cIwVreI-hJsDl66PuPvPXKmMx9klrtMLlrnvRqit9KjWX9vdHVC9LJ0iREWkiSSZ/h120/bg-GRddslanima-2-light2.jpg) 50% 100% no-repeat;
      color:#0ff;
}
ul.GRddslanima-2 li div{
      position:absolute;
      height:0;
      width:220px;
      left:0;
      top:0;
      overflow:hidden;
      transition:1s 1.5s;	  
      -o-transition:1s 1.5s;  
      -ms-transition:1s 1.5s;  
      -moz-transition:1s 1.5s;  
      -webkit-transition:1s 1.5s;
}
ul.GRddslanima-2 li:hover div{
      height:700px;
      transition:0s;
      -o-transition:0s;
      -ms-transition:0s;
      -moz-transition:0s;
      -webkit-transition:0s;
}
ul.GRddslanima-2 li div ul{
      position:absolute;
      max-height:700px;
      width:200px;
      left:0;
      top:-900px;
      transition:1s ease-in 0.5s;
      -o-transition:1s ease-in 0.5s;
      -ms-transition:1s ease-in 0.5s;
      -moz-transition:1s ease-in 0.5s;
      -webkit-transition:1s ease-in 0.5s;
}
ul.GRddslanima-2 li:hover div ul{
      top:42px;
      border-radius:10px;
      box-shadow:4px 3px 4px #000;
}

xHTML

<div class="myGRddslanima-2">
<ul class="GRddslanima-2">
<li><a href="URL">Home</a></li>
<li><a href="URL">Nusa Tenggara</a>
    <div>
      <ul>
        <li><a href="URL">Nusa Tenggara-01</a></li>
        <li><a href="URL">Nusa Tenggara-02</a></li>
        <li><a href="URL">Nusa Tenggara-03</a></li>
        <li><a href="URL">Nusa Tenggara-04</a></li>
        <li><a href="URL">Nusa Tenggara-05</a></li>
        <li><a href="URL">Nusa Tenggara-06</a></li>
        <li><a href="URL">Nusa Tenggara-07</a></li>
        <li><a href="URL">Nusa Tenggara-08</a></li>
        <li><a href="URL">Nusa Tenggara-09</a></li>
        <li><a href="URL">Nusa Tenggara-10</a></li>
        <li><a href="URL">Nusa Tenggara-11</a></li>
        <li><a href="URL">Nusa Tenggara-12</a></li>
        <li><a href="URL">Nusa Tenggara-13</a></li>
        <li><a href="URL">Nusa Tenggara-14</a></li>
        <li><a href="URL">Nusa Tenggara-15</a></li>
        <li><a href="URL">Nusa Tenggara-16</a></li>
        <li><a href="URL">Nusa Tenggara-17</a></li>
        <li><a href="URL">Nusa Tenggara-18</a></li>
        <li><a href="URL">Nusa Tenggara-19</a></li>
        <li><a href="URL">Nusa Tenggara-20</a></li>
        <li><a href="URL">Nusa Tenggara-21</a></li>
        <li><a href="URL">Nusa Tenggara-22</a></li>
      </ul>
    </div>
  </li>

  <li><a href="URL">P Bali</a>
    <div>
      <ul>
        <li><a href="URL">GRdd_05agst Bali-01</a></li>
        <li><a href="URL">GRdd_05agst Bali-02</a></li>
        <li><a href="URL">GRdd_05agst Bali-03</a></li>
        <li><a href="URL">GRdd_05agst Bali-04</a></li>
        <li><a href="URL">GRdd_05agst Bali-05</a></li>
        <li><a href="URL">GRdd_05agst Bali-06</a></li>
        <li><a href="URL">GRdd_05agst Bali-07</a></li>
        <li><a href="URL">GRdd_05agst Bali-08</a></li>
      </ul>
    </div>
  </li>

  <li><a href="URL">Lapindo</a>
    <div>
      <ul>
        <li><a href="URL">Lapindo-01</a></li>
        <li><a href="URL">Lapindo-02</a></li>
        <li><a href="URL">Lapindo-03</a></li>
        <li><a href="URL">Lapindo-04</a></li>
        <li><a href="URL">Lapindo-05</a></li>
        <li><a href="URL">Lapindo-06</a></li>
        <li><a href="URL">Lapindo-07</a></li>
        <li><a href="URL">Lapindo-08</a></li>
        <li><a href="URL">Lapindo-09</a></li>
        <li><a href="URL">Lapindo-10</a></li>
        <li><a href="URL">Lapindo-11</a></li>
        <li><a href="URL">Lapindo-12</a></li>
      </ul>
    </div>
  </li>

  <li><a href="URL">Rekening GENDUT</a>
    <div>
      <ul>
        <li><a href="URL">Rekening Si-A</a></li>
        <li><a href="URL">Rekening Si-B</a></li>
        <li><a href="URL">Rekening Si-C</a></li>
        <li><a href="URL">Rekening Si-D</a></li>
        <li><a href="URL">Rekening Si-E</a></li>
        <li><a href="URL">Rekening Si-F</a></li>
      </ul>
    </div>
  </li>

  <li><a href="URL">Kalimantan</a>
    <div>
      <ul>
        <li><a href="URL">Pontianak</a></li>
        <li><a href="URL">Samarinda</a></li>
        <li><a href="URL">Sangata</a></li>
        <li><a href="URL">Balikpapan</a></li>
      </ul>
    </div>
  </li>

</ul>
</div>

Keterangan :

Agar animated single level dropdown menu ini dapat dibuat tanpa mengalami kesulitan (di blogger), buka panduan di bawah ini terlebih dahulu:

Elemen Baru untuk membuat Menu Horizontal di Blogger