Multilevel dropdown horizontal menu for blogger-4

CSS Multilevel dropdownmenu dengan efek animasiyang dibuat melalui css3 transition. Menu dropdown multilevel ini menggunakan ukuran font sebesar 14px. Dengan dropdown menu ini anda dapat memuat puluhan menu hingga ratusan menu bergantung pada pengembangan penggunaan dan fungsi menu. Jika anda menghendaki bentuk menu yang lebih sempit, anda dapat menggunakan font dengan ukuran yang lebih kecil. Ketinggian menu juga dapat anda sesuaikan dengan merubah variable css yang berhubungan dengan tinggi menu.

Kode CSS

.GRMLdd812{
    position:relative;
    margin:0;
    padding:3px;
    background:#eee;
    height:36px;
    }
.GRMLdd812 ul,.GRMLdd812 li{
    padding:0;
    margin:0;
    list-style:none;
    }
.GRMLdd812 ul{
    width:160px;
    float:left;
    }
.GRMLdd812 ul ul{
    position:absolute;
    z-index:-1;
    -webkit-transition: 0.5s 0.4s;
    -moz-transition: 0.5s 0.4s;
    -ms-transition: 0.5s 0.4s;
    -o-transition: 0.5s 0.4s;
    transition: 0.5s 0.4s;
    }
.GRMLdd812 ul ul ul{
    position:absolute;
    left:160px;
    top:0;
}
.GRMLdd812 ul ul ul.rgt{
    position:absolute;
    left:auto;
    right:160px;
    top:0;
}
.GRMLdd812 ul li{
    float:left;
    width:160px;
    position:relative;
    z-index:10;
    background:url(trans.gif);
    -webkit-transition: 0.4s;
    -moz-transition: 0.4s;
    -ms-transition: 0.4s;
    -o-transition: 0.4s;
    transition: 0.4s;
}
.GRMLdd812 ul li a{
    display:block;
    width:149px;
    height:35px;
    padding-left:10px;
    background:rgba(0,0,0,.65);
    border:1px solid #888;
    border-bottom-color:#000;
    font:normal 14px/35px arial, sans-serif;
    color:#eee;
    text-shadow:1px 1px 1px #000;
    text-decoration:none;
    border-radius:2px;
}
.GRMLdd812 ul li a.fly{
    background:#777 url(https://lh4.googleusercontent.com/-mMxqiqnZJ3o/UBkGYaDhUyI/AAAAAAAADBY/YvMwVnexPqM/GRred-arrow-circle-down-16x16.png) no-repeat 98% center;
    }
.GRMLdd812 ul li:hover > a{
    background:rgba(0,0,0,.75);
    color:#02e4ff;
    }
.GRMLdd812 ul li:hover > a.fly{
    background:rgba(0,0,0,.9) url(https://lh6.googleusercontent.com/-HhRLQ6exi80/TwvFcS6VdQI/AAAAAAAABFQ/ralc0MEevFY/gubhugreyot-arrow-down-anima.gif) no-repeat 98% center;
    }
.GRMLdd812 ul ul li{margin-top:-37px;}
.GRMLdd812 ul ul li.p1{margin-top:0;}
.GRMLdd812 ul ul ul{margin-left:-160px;}
.GRMLdd812 ul ul ul.rgt{margin-left:0;margin-right:-160px;}
.GRMLdd812 ul li:hover > ul > li{
    margin-top:0;
}
.GRMLdd812 ul ul li:hover > ul{
  margin-left:0;
}
.GRMLdd812 ul ul li:hover > ul.rgt{
    margin-left:auto;
    margin-right:0;
}
.GRMLdd812 ul li.close {margin-top:-37px; z-index:-1;}
.GRMLdd812 ul.pendek,.GRMLdd812 ul.pendek li, .GRMLdd812 ul.pendek li a{
    text-align:center;
    padding-left:0;
    padding-right:0;
    width:120px;
    font-weight:600;
}

xHTML

<div class="GRMLdd812">
  <ul class="pendek">
    <li><a href="http://bestbloggermenus.blogspot.com" target="_blank">Home</a></li>
  </ul>
  <ul class="pendek">
    <li><a href="http://gubhugreyot.blogspot.com" target="_blank">gubhugreyot</a></li>
  </ul>
  <ul>
    <li><a class="fly" href="#url">Menu Pertama</a>
      <ul>
        <li><a href="#URL">Menu Pertama-A</a></li>
        <li><a href="#URL">Menu Pertama-B</a></li>
        <li><a href="#URL">Menu Pertama-C</a></li>
        <li><a href="#URL">Menu Pertama-D</a></li>
      </ul>
    </li>
    <li class="close"><a href="#url">Close X</a></li>
  </ul>
  <ul>
    <li><a class="fly" href="#url">Menu Kedua</a>
      <ul>
        <li><a href="#URL">Menu Kedua-A</a></li>
        <li><a class="fly" href="#url">Menu Kedua-B</a>
          <ul>
            <li class="p1"><a href="#URL">Menu Kedua-B-01</a></li>
            <li><a href="#URL">Menu Kedua-B-02</a></li>
            <li><a class="fly" href="#url">Menu Kedua-B-03</a>
              <ul>
                <li class="p1"><a href="#URL">Menu Kedua-B-03a</a></li>
                <li><a href="#URL">Menu Kedua-B-03b</a></li>
                <li><a href="#URL">Menu Kedua-B-03c</a></li>
                <li><a href="#URL">Menu Kedua-B-03d</a></li>
              </ul>
            </li>
            <li><a href="#URL">Expert</a></li>
          </ul>
        </li>
        <li><a href="#URL">Menu Kedua-C</a></li>
        <li><a class="fly" href="#url">Menu Kedua-D</a>
          <ul>
            <li class="p1"><a href="#URL">Menu Kedua-D-01</a></li>
            <li><a href="#URL">Menu Kedua-D-02</a></li>
            <li><a href="#URL">Menu Kedua-D-03</a></li>
            <li><a href="#URL">Menu Kedua-D-04</a></li>
          </ul>
        </li>
        <li><a class="fly" href="#url">Menu Kedua-E</a>
          <ul>
            <li class="p1"><a href="#URL">Menu Kedua-E-01</a></li>
            <li><a href="#URL">Menu Kedua-E-02</a></li>
            <li><a href="#URL">Menu Kedua-E-03</a></li>
          </ul>
        </li>
      </ul>
    </li>
    <li class="close"><a href="#url">Close X</a></li>
  </ul>
  <ul>
    <li><a class="fly" href="#url">Menu Ketiga</a>
      <ul>
        <li><a href="#URL">Menu Ketiga-01</a></li>
        <li><a href="#URL">Menu Ketiga-02</a></li>
        <li><a href="#URL">Menu Ketiga-03</a></li>
        <li><a href="#URL">Menu Ketiga-04</a></li>
      </ul>
    </li>
    <li class="close"><a href="#url">Close X</a></li>
  </ul>
  <ul>
    <li><a class="fly" href="#url">Menu Keempat</a>
      <ul>
        <li><a href="#URL">Menu Keempat-B</a></li>
        <li><a class="fly" href="#url">Menu Keempat-B</a>
          <ul class="rgt">
            <li class="p1"><a href="#URL">Menu Keempat-B-01</a></li>
            <li><a href="#URL">Menu Keempat-B-02</a></li>
            <li><a class="fly" href="#url">Menu Keempat-B-03</a>
              <ul class="rgt">
                <li class="p1"><a href="#URL">Menu Keempat-B-03a</a></li>
                <li><a href="#URL">Menu Keempat-B-03b</a></li>
                <li><a href="#URL">Menu Keempat-B-03c</a></li>
                <li><a href="#URL">Menu Keempat-B-03d</a><b></b></li>
              </ul>
            </li>
            <li><a href="#URL">Menu Keempat-B-04</a></li>
            <li><a href="#URL">Menu Keempat-B-05</a></li>
          </ul>
        </li>
        <li><a class="fly" href="#url">Menu Keempat-C</a>
          <ul class="rgt">
            <li class="p1"><a href="#URL">Menu Keempat-C-01</a></li>
            <li><a href="#URL">Menu Keempat-C-02</a></li>
            <li><a href="#URL">Menu Keempat-C-03</a></li>
            <li><a href="#URL">Menu Keempat-C-04</a><b></b></li>
          </ul>
        </li>
        <li><a href="#URL">Menu Keempat-D</a></li>
      </ul>
    </li>
    <li class="close"><a href="#url">Close X</a></li>
  </ul>
</div>