Multilevel dropdown horizontal menu for blogger-1

Sebuah dropdown menu css yang sangat cantik dilengkapi animasi melalui hover css3 transition. Dropdown mwnu horizontal ini terbilang sederhana dalam penggunaan kode css namun memberikan hasil yang cukup otimal dengan tampilan sangat menarik.

Demo dapat anda lihat di bawah header blog (di atas posting).

Kode CSS

ul.dd_rumitmenu,ul.dd_rumitmenu ul,ul.dd_rumitmenu li{
    list-style:none;
    margin:0;
    padding:0;
    }
ul.dd_rumitmenu a{text-decoration:none;}
ul.dd_rumitmenu{
    font-family:arial;
    font-size:12px;
    width:850px;
    margin:0 auto;
    }
ul.dd_rumitmenu a{
    background:url(https://lh5.googleusercontent.com/-0Q3diuGAKIs/UBqmNIiqR3I/AAAAAAAADD4/YCIBe7SKLbk/bg_hor-grad-transp-60x3.png);
    background-size:auto 80px;
    height:35px;
    line-height:35px;
    color:#fff;
    text-shadow:1px 1px 0px #000;
    box-shadow:1px 1px 4px rgba(0, 0, 0, 0.5);
    } 
.dd_rumitmenu a,.dd_rumitmenu ul a{
    transition:0.5s;
    -o-transition:0.5s;
    -ms-transition:0.5s;
    -moz-transition:0.5s;
    -webkit-transition:0.5s;
    }
.dd_rumitmenu ul a{
    background:#6be;
    height:0;
    } 
.dd_rumitmenu ul:hover a{
    background:#6be;
    height:35px;
    line-height:35px;
    } 
ul.dd_rumitmenu .fly .main{
    background:#6be url(https://lh5.googleusercontent.com/-OGf1bv2hT2E/UBkGUqYx-RI/AAAAAAAADA4/uXVGm_Gq-dg/GRgray-arrow-circle-down-16x16.png) no-repeat 135px center;
    }
ul.dd_rumitmenu .down{
    position:relative;
    background:url(https://lh5.googleusercontent.com/-0Q3diuGAKIs/UBqmNIiqR3I/AAAAAAAADD4/YCIBe7SKLbk/bg_hor-grad-transp-60x3.png);
    background-size:auto 80px;
    }
ul.dd_rumitmenu .down:before{
    position:absolute;
    right:4px;
    top:0;
 content:url(https://lh4.googleusercontent.com/-mMxqiqnZJ3o/UBkGYaDhUyI/AAAAAAAADBY/YvMwVnexPqM/s128/GRred-arrow-circle-down-16x16.png);
    width:16px;
    height:16px;
    }
ul.dd_rumitmenu .right ul a{
    text-align:right;
    }
.dd_rumitmenu .right ul .main{
    background:#6be url(https://lh6.googleusercontent.com/-HhRLQ6exi80/TwvFcS6VdQI/AAAAAAAABFQ/ralc0MEevFY/s128/gubhugreyot-arrow-down-anima.gif) no-repeat 10px center;
    text-align:right;
    }
ul.dd_rumitmenu ul{top:-35px;}
ul.dd_rumitmenu ul ul{top:-70px;}
ul.dd_rumitmenu .drop{width:160px;}
ul.dd_rumitmenu a{width:140px;padding:0 10px;}
ul.dd_rumitmenu ul li{max-width:130px;} 
ul.dd_rumitmenu ul ul{left:160px;}
ul.dd_rumitmenu li.right ul ul{left:auto;right:160px;}
ul.dd_rumitmenu a{margin-right:-159px;}
ul.dd_rumitmenu li{float:left;}
ul.dd_rumitmenu ul{float:left;position:relative;z-index:20;}
ul.dd_rumitmenu ul li{clear:left;} 
ul.dd_rumitmenu a{position:relative;display:block;} 
ul.dd_rumitmenu a.main{float:left;margin-top:10000px;}
ul.dd_rumitmenu .drop,
ul.dd_rumitmenu .fly{margin-top:-10000px;} 
ul.dd_rumitmenu ul{margin-bottom:-5000px;}
ul.dd_rumitmenu a:hover,
ul.dd_rumitmenu a:focus,
ul.dd_rumitmenu a:active{
    margin-right:0;
    z-index:10;
    outline:0;
    background-position:left -35px;
    color:#000;
    text-shadow:1px 1px 0px #fff;
    text-decoration:none;
    }
ul.dd_rumitmenu li li a:hover, 
ul.dd_rumitmenu li li a:focus, 
ul.dd_rumitmenu li li a:active{
    background:#7cf;
    color:#000;
    text-shadow:1px 1px 0px #fff;
    }
ul.dd_rumitmenu ul:hover,
ul.dd_rumitmenu ul ul:hover{clear:left;} 
.dd_rumitmenu .fly{width:100%;}
a:active{}
.dd_rumitmenu a.top{
    color:#000;
    background:rgba(0,0,0,.2) url(https://lh4.googleusercontent.com/-EOs7YTtm9IM/UBqjT3weptI/AAAAAAAADDg/HljjY5JM6V4/bg_hor-grad-transp-60x2.gif) no-repeat left -35px;
    text-align:left;
    text-shadow:1px 1px 0px #fff;
    height:36px;
    }
ul.dd_rumitmenu a.top:hover,ul.dd_rumitmenu a.top:focus,ul.dd_rumitmenu a.top:active{
    color:#000;
    background:#03a1ff url(https://lh3.googleusercontent.com/-Th2kp6LNE4Y/TQzWUXTpFgI/AAAAAAAAAyc/2f5xTMYaRbE/s128/ArrowDownAnimaBlue.gif) no-repeat 98% center;
    text-align:left;
    height:36px;
    }
ul.dd_rumitmenu a.sub{
    color:#000;
    background:#7cf url(https://lh5.googleusercontent.com/-ZzOmPi3U7Y8/TvyW7tjiBVI/AAAAAAAAA1A/os9KQaqlXqQ/BlueArrowV12H12.gif.png) no-repeat 115px center;
    position:relative;
    left:-160px;
    top:35px;
    text-shadow:1px 1px 0px #fff;
    }
ul.dd_rumitmenu a.sub:hover,ul.dd_rumitmenu a.sub:focus,ul.dd_rumitmenu a.sub:active{
    background:#7cf url(https://lh5.googleusercontent.com/-ZzOmPi3U7Y8/TvyW7tjiBVI/AAAAAAAAA1A/os9KQaqlXqQ/BlueArrowV12H12.gif.png) no-repeat 135px center;
    }
.dd_rumitmenu .right a.top{text-align:left;}
.dd_rumitmenu .right a.sub{
    left:160px;
    background:#7cf url(https://lh5.googleusercontent.com/-nsnb0B5z_ao/UBkGYwEIjaI/AAAAAAAADBg/8QvAp0pbfLw/GRred-arrow-circle-left-16x16.png) no-repeat 10px center;
    color:#000;
    text-shadow:1px 1px 0px #fff;
    }
ul.dd_rumitmenu .right a.sub:hover{
    background:#7cf url(https://lh5.googleusercontent.com/-nsnb0B5z_ao/UBkGYwEIjaI/AAAAAAAADBg/8QvAp0pbfLw/GRred-arrow-circle-left-16x16.png) no-repeat 10px center;
    }

xHTML

<div id="adah_ddrumit" style="background:rgba(0,0,0,.3);width:100%;height:35px;">
  <ul class="dd_rumitmenu">
    <li class="drop"><a class="main" href="http://bestbloggermenus.blogspot.com" target="_blank">Home</a></li>
      <li class="drop"><a class="main down" href="#url">Papua</a>
        <ul>
          <li><a class="top" href="#url">Papua</a>
          <li class="fly"><a class="main" href="#url">Papua-A</a>
            <ul>
              <li><a class="sub" href="#url">Papua-A</a></li>
              <li><a href="#url">Papua-A1</a></li>
              <li><a href="#url">Papua-A2</a></li>
              <li><a href="#url">Papua-A3</a></li>
              <li><a href="#url">Papua-A4</a></li>
              <li class="fly"><a class="main" href="#url">Papua-A5</a>
                <ul>
                  <li><a class="sub" href="#url">Papua-A5</a></li>
                  <li><a href="#url">Papua-A51</a></li>
                  <li><a href="#url">Papua-A52</a></li>
                  <li><a href="#url">Papua-A53</a></li>
                  <li><a href="#url">Papua-A54</a></li>
                </ul>
              </li>
              <li><a href="#url">Papua-A6</a></li>
            </ul>
          </li>
          <li class="fly"><a class="main" href="#url">Papua-B</a>
            <ul>
              <li><a class="sub" href="#url">Papua-B</a>
              <li class="fly"><a class="main" href="#url">Papua-B1</a>
                <ul>
                  <li><a class="sub" href="#url">Papua-B1</a></li>
                  <li><a href="#url">Papua-B1a</a></li>
                  <li><a href="#url">Papua-B1b</a></li>
                  <li><a href="#url">Papua-B1c</a></li>
                  <li><a href="#url">Papua-B1d</a></li>
                  <li><a href="#url">Papua-B1e</a></li>
                </ul>
              </li>
              <li><a href="#url">Papua-B2</a></li>
              <li><a href="#url">Papua-B3</a></li>
            </li></ul>
          </li>
          <li class="fly"><a class="main" href="#url">Papua-C</a>
            <ul>
              <li><a class="sub" href="#url">Papua-C</a>
              <li class="fly"><a class="main" href="#url">Papua-C1</a>
                <ul>
                  <li><a class="sub" href="#url">Papua-C1</a></li>
                  <li><a href="#url">Papua-C1a</a></li>
                  <li><a href="#url">Papua-C1b</a></li>
                  <li><a href="#url">Papua-C1c</a></li>
                  <li class="fly"><a class="main" href="#url">Papua-C1d</a>
                    <ul>
                      <li><a class="sub" href="#url">Papua-C1d</a></li>
                      <li><a href="#url">Papua-C1d-01</a></li>
                      <li><a href="#url">Papua-C1d-02</a></li>
                      <li><a href="#url">Papua-C1d-03</a></li>
                      <li><a href="#url">Papua-C1d-04</a></li>
                    </ul>
                  </li>
                  <li class="fly"><a class="main" href="#url">Papua-C1e</a>
                    <ul>
                      <li><a class="sub" href="#url">Papua-C1e</a></li>
                      <li><a href="#url">Papua-C1e-01</a></li>
                      <li><a href="#url">Papua-C1e-02</a></li>
                      <li><a href="#url">Papua-C1e-03</a></li>
                      <li><a href="#url">Papua-C1e-04</a></li>
                      <li><a href="#url">Papua-C1e-05</a></li>
                    </ul>
                  </li>
                  <li><a href="#url">Papua-C1f</a></li>
                  <li><a href="#url">Papua-C1g</a></li>
                </ul>
              </li>
              <li class="fly"><a class="main" href="#url">Papua-C2</a>
                <ul>
                  <li><a class="sub" href="#url">Papua-C2</a></li>
                  <li><a href="#url">Papua-C2a</a></li>
                  <li><a href="#url">Papua-C2b</a></li>
                  <li><a href="#url">Papua-C2c</a></li>
                  <li><a href="#url">Papua-C2d</a></li>
                  <li><a href="#url">Papua-C2e</a></li>
                </ul>
              </li>
              <li><a href="#url">Papua-C3</a></li>
              <li class="fly"><a class="main" href="#url">Papua-C4</a>
                <ul>
                  <li><a class="sub" href="#url">Papua-C4</a></li>
                  <li><a href="#url">Papua-C4a</a></li>
                  <li><a href="#url">Papua-C4b</a></li>
                  <li><a href="#url">Papua-C4c</a></li>
                </ul>
              </li>
              <li><a href="#url">Papua-C5</a></li>
              <li><a href="#url">Papua-C6</a></li>
            </li></ul>
          </li>
          <li><a href="#url">Papua-D</a></li>
          <li><a href="#url">Papua-E</a></li>
          <li><a href="#url">Papua-F</a></li>
          <li><a href="#url">Papua-G</a></li>
          <li><a href="#url">Papua-H</a></li>
        </li></ul>
      </li>


      <li class="drop"><a class="main down" href="#url">Sulawesi</a>
        <ul>
          <li><a class="top" href="#url">Sulawesi</a>
          <li class="fly"><a class="main" href="#url">Sulawesi-A</a>
            <ul>
              <li><a class="sub" href="#url">Sulawesi-A</a></li>
              <li class="fly"><a class="main" href="#url">Sulawesi-A1</a>
                <ul>
                  <li><a class="sub" href="#url">Sulawesi-A1</a></li>
                  <li><a href="#url">Sulawesi-A1a</a></li>
                  <li><a href="#url">Sulawesi-A1b</a></li>
                  <li><a href="#url">Sulawesi-A1c</a></li>
                  <li><a href="#url">Sulawesi-A1d</a></li>
                  <li><a href="#url">Sulawesi-A1e</a></li>
                </ul>
              </li>
              <li><a href="#url">Sulawesi-A2</a></li>
              <li><a href="#url">Sulawesi-A3</a></li>
              <li><a href="#url">Sulawesi-A4</a></li>
              <li><a href="#url">Sulawesi-A5</a></li>
              <li><a href="#url">Sulawesi-A6</a></li>
            </ul>
          </li>
          <li class="fly"><a class="main" href="#url">Sulawesi-B</a>
            <ul>
              <li><a class="sub" href="#url">Sulawesi-B</a></li>
              <li><a href="#url">Sulawesi-B1</a></li>
              <li><a href="#url">Sulawesi-B2</a></li>
              <li><a href="#url">Sulawesi-B3</a></li>
              <li><a href="#url">Sulawesi-B4</a></li>
              <li><a href="#url">Sulawesi-B5</a></li>
              <li><a href="#url">Sulawesi-B6</a></li>
            </ul>
          </li>
          <li class="fly"><a class="main" href="#url">Sulawesi-C</a>
            <ul>
              <li><a class="sub" href="#url">Sulawesi-C</a></li>
              <li><a href="#url">Sulawesi-C1</a></li>
              <li><a href="#url">Sulawesi-C2</a></li>
              <li><a href="#url">Sulawesi-C3</a></li>
            </ul>
          </li>
          <li class="fly"><a class="main" href="#url">Sulawesi-D</a>
            <ul>
              <li><a class="sub" href="#url">Sulawesi-D</a></li>
              <li><a href="#url">Sulawesi-D1</a></li>
              <li><a href="#url">Sulawesi-D2</a></li>
              <li><a href="#url">Sulawesi-D3</a></li>
              <li><a href="#url">Sulawesi-D4</a></li>
              <li><a href="#url">Sulawesi-D5</a></li>
              <li><a href="#url">Sulawesi-D6</a></li>
            </ul>
          </li>
          <li><a href="#url">Sulawesi-E</a></li>
        </li></ul>
      </li>   
        
      <li class="drop right"><a class="main down" href="#url">Kalimantan</a>
        <ul>
          <li><a class="top" href="#url">Kalimantan</a>
          <li><a href="#url">Kalimantan-A</a></li>
          <li><a href="#url">Kalimantan-B</a></li>
          <li><a href="#url">Kalimantan-C</a></li>
          <li class="fly"><a class="main" href="#url">Kalimantan-D</a>
            <ul>
              <li><a class="sub" href="#url">Kalimantan-D</a></li>
              <li><a href="#url">Kalimantan-D1</a></li>
              <li><a href="#url">Kalimantan-D2</a></li>
              <li><a href="#url">Kalimantan-D3</a></li>
              <li><a href="#url">Kalimantan-D4</a></li>
            </ul>
          </li>
          <li><a href="#url">Kalimantan-E</a></li>
          <li class="fly"><a class="main" href="#url">Kalimantan-F</a>
            <ul>
              <li><a class="sub" href="#url">Kalimantan-F</a></li>
              <li><a href="#url">Kalimantan-F1</a></li>
              <li><a href="#url">Kalimantan-F2</a></li>
              <li><a href="#url">Kalimantan-F3</a></li>
              <li class="fly"><a class="main" href="#url">Kalimantan-F4</a>
                <ul>
                  <li><a class="sub" href="#url">Kalimantan-F4</a></li>
                  <li><a href="#url">Kalimantan-F4a</a></li>
                  <li><a href="#url">Kalimantan-F4b</a></li>
                  <li><a href="#url">Kalimantan-F4c</a></li>
                  <li><a href="#url">Kalimantan-F4d</a></li>
                  <li><a href="#url">Kalimantan-F4e</a></li>
                </ul>
              </li>
              <li><a href="#url">Kalimantan-F5</a></li>
              <li><a href="#url">Kalimantan-F6</a></li>
            </ul>
          </li>
        </li></ul>
      </li>
    <li class="drop"><a class="main" href="http://gubhugreyot.blogspot.com" target="_blank">gubhugreyot</a></li>
  </ul>
</div>