Animated Single Level dropdown menu for blogger (1)

Single level dropdown menu merupakan menu horizontal yang dilengkapi dengan animasi yang dibuat dengan css3 transition dan css3 transform. Sebuah single dropdown menu yang hanya dibuat dengan kode css (tanpa javascript). Anda bisa menlihat dan mencoba animasi yang tercipta dengan mengarahkan cursor di setiap link horizontal menu yang ada di atas posting.

Kode CSS

.adah_simenu{
      position:relative;
      background:rgba(0,0,0,.7);    
      /*width:793px;*/width:100%;
      height:40px;
      padding:0;
      margin:0;
}
ul.GRdd_05agst, .GRdd_05agst ul,.GRdd_05agst li{
      padding:0;
      margin:0;
      list-style:none;
      position:relative;
      font-family:arial, sans-serif;
}
ul.GRdd_05agst{
      width:900px;
      height:40px;
      overflow:hidden;
      position:absolute;
      left:45px;
      top:0;
}
ul.GRdd_05agst li{
      float:left;
      position:relative;
      z-index:10;
}
ul.GRdd_05agst li a{
      text-shadow:1px 1px 1px #000;
      float:left;
      display:block;
      height:41px;
      padding:0px 10px;
      line-height:30px;
      position:relative;
      z-index:20;
      color:#eee;
      border-right:1px solid rgba(255,255,0,.4);
      text-decoration:none;
      font-size:14px;
      background:url(https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEinkNXeil522aAyuT8pZY77eqg-ICs1MTnIjK-bWzNFH6cQ8CEVy15Q2ijjUw6OQkkz8c_ZQ2zqrht8cIwVreI-hJsDl66PuPvPXKmMx9klrtMLlrnvRqit9KjWX9vdHVC9LJ0iREWkiSSZ/) no-repeat center 40%;
}
.GRdd_05agst li:hover a{
      background:url(https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEinkNXeil522aAyuT8pZY77eqg-ICs1MTnIjK-bWzNFH6cQ8CEVy15Q2ijjUw6OQkkz8c_ZQ2zqrht8cIwVreI-hJsDl66PuPvPXKmMx9klrtMLlrnvRqit9KjWX9vdHVC9LJ0iREWkiSSZ/) no-repeat bottom center;
 }
.GRdd_05agst li.first a{
      background:url(https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEinkNXeil522aAyuT8pZY77eqg-ICs1MTnIjK-bWzNFH6cQ8CEVy15Q2ijjUw6OQkkz8c_ZQ2zqrht8cIwVreI-hJsDl66PuPvPXKmMx9klrtMLlrnvRqit9KjWX9vdHVC9LJ0iREWkiSSZ/) no-repeat center  -6px;
}
.GRdd_05agst li.komplit{
      width:50px;
      height:41px;
}
.GRdd_05agst li.komplit b{
      display:block;
      height:41px;
      width:50px;
      background:url(https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEinkNXeil522aAyuT8pZY77eqg-ICs1MTnIjK-bWzNFH6cQ8CEVy15Q2ijjUw6OQkkz8c_ZQ2zqrht8cIwVreI-hJsDl66PuPvPXKmMx9klrtMLlrnvRqit9KjWX9vdHVC9LJ0iREWkiSSZ/) no-repeat center -6px;
}
.GRdd_05agst ul,.GRdd_05agst li a{
      transition:0.8s ease-in-out;
      -o-transition:0.8s ease-in-out;
      -ms-transition:0.8s ease-in-out;
      -moz-transition:0.8s ease-in-out;
      -webkit-transition:0.8s ease-in-out;
}
.GRdd_05agst ul{
      width:220px;
      height:auto;
      position:absolute;
      top:-800px;
      transition:0.8s ease-in-out;
      -o-transition:0.8s ease-in-out;
      -ms-transition:0.8s ease-in-out;
      -moz-transition:0.8s ease-in-out;
      -webkit-transition:0.8s ease-in-out;
      z-index:1;
      padding:10px 0 15px;
      background:brown; 
      box-shadow: 2px 2px 3px rgba(0,0,0,0.9);
      border-radius:15px;
}
.GRdd_05agst ul li a{
      width:200px;
      height:30px;
      line-height:30px;
      background:#000 url(https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEinkNXeil522aAyuT8pZY77eqg-ICs1MTnIjK-bWzNFH6cQ8CEVy15Q2ijjUw6OQkkz8c_ZQ2zqrht8cIwVreI-hJsDl66PuPvPXKmMx9klrtMLlrnvRqit9KjWX9vdHVC9LJ0iREWkiSSZ/) no-repeat center;
}
.GRdd_05agst:hover{
      height:800px;
}
.GRdd_05agst a:hover{
      color:#0ff;
}
.GRdd_05agst li:hover > a{
      color:#0ff;
}
.GRdd_05agst li:hover ul{
      transform:translate(0,837px);
      -o-transform:translate(0,837px);
      -ms-transform:translate(0,837px);
      -moz-transform:translate(0,837px);
      -webkit-transform:translate(0,837px);
}

xHTML

<div class="adah_simenu">
<ul class="GRdd_05agst">
  <li class="first"><a href="http://bestbloggerGRdd_05agsts.blogspot.com" target="_blank">Home</a></li>
  <li><a href="http://gubhugreyot.blogspot.com" target="_blank">gubhugreyot<b></b></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>

  <li><a href="http://bestbloggerhack.blogspot.com" target="_blank">bestbloggerhack<b></b></a></li>
  <li class="komplit"><b></b></li>  
</ul>
</div>
</div>