Membuat Menu Dropdown Ala ChromeGT (Red Skin)

Selamat siang sobat Share Pengetahuan, pada kesempatan kali ini saya mau posting tentang cara Membuat Menu Dropdown Ala ChromeGT (Red Skin), mungkin di antara sobat semua sudah ada yang tau kan? dan Menurut saya menu dropdown yang satu ini lumayan keren lho sob. bagi sobat yang belum tau nih saya kasih SSnya

Gmna sob?? keren kan haha
yaudah langsung aja yuk di bahas cara pemasanganya
     1. Masuk ke dasboard -> rancangan (Template) -> pilih edit html -> 

     2. Copy lalu Paste kode CSS di bawah ini

#menu_fallback{margin:20px 0 0 35px}
#topmenu_bg{position:relative;width:970px;height:77px;margin:-70px auto 0 auto;z-index:9999}
#topmenu{position:absolute;width:970px;height:77px;top:56px;z-index:9999}
div#smenu{margin:10px 35px 0 35px;height:25px;padding-left:13px;width:auto}
div#smenu ul{margin:0;padding:0;list-style:none;float:left}
div#smenu ul.menu{padding-right:13px}
div#smenu li{position:relative;margin:0;padding:0 0 0 0;display:block;float:left;z-index:9;width:auto}
div#smenu ul ul li{z-index:9}
div#smenu li div{list-style:none;float:left;position:absolute;z-index:11;top:47px;width:210px;left:0;display:none;margin:0 0 0 -4px;padding:17px 0 0 0}
div#smenu ul ul{z-index:12;width:210px;adding:0 5px 26px 5px;margin:10px 0 0 0}
div#smenu li:hover>div{display:block}
div#smenu a{font-size:20px;position:relative;z-index:10;height:45px;display:block;float:left;line-height:25px;text-decoration:none;white-space:nowrap;width:auto;padding-right:5px;text-align:center}
div#smenu span{display:block;margin-top:8px;padding-left:20px;background:none;line-height:25px;display:block;cursor:pointer;background-repeat:no-repeat;background-position:95% 0;text-align:center}
div#smenu a{display:block;padding:0 10px 0 0;line-height:30px;height:61px;margin-right:5px;background:none;text-transform:uppercase}
div#smenu ul ul{display:block;padding:0 5px 26px 5px}
div#smenu ul ul li{padding:2px 0}
div#smenu ul ul a{padding:0;height:auto;float:none;display:block;line-height:25px;font-size:16px;z-index:-1;padding-left:5px;white-space:normal;width:164px;margin:0 8px 0 15px;text-transform:none}
div#smenu ul ul a span{padding:5px 5px 2px;line-height:10px;font-size:14px}
div#smenu li.current ul a,div#smenu li.current ul a span{background:none}
div#smenu ul ul a:hover{background:none}
div#smenu ul ul a.parent{}
div#smenu ul ul a.parent:hover span{background:none}
div#smenu ul ul span{margin-top:0;text-align:left}
div#smenu ul ul li{width:100%}
div#smenu ul ul div{width:210px;padding:10px 0 0 0;margin:-75px 0 0 180px !important}
div#smenu ul ul ul{margin-top:24px;padding:3px 0 15px 0}
div#smenu ul ul div li{position:relative;top:-10px}
div#smenu ul ul div li a{width:164px;margin:0 8px 0 20px}
div#smenu li.back{width:5px;height:45px;z-index:8;position:absolute;padding:0;margin:0 0 0 0}
div#smenu li.back .left{padding:0;width:auto;height:45px;margin:0 0 0 5px;float:none;position:relative;top:0;left:0;display:block}
#topmenu{background-image:url(https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEizjNLFRGtgkE6OJ7f_tlkFM_Dg637aprY8G_J9B63XDbfBdPg4Fvqu6RTXnHn5AZJXZksnXesSm5mxmm92b2aP-2ORC7b7EyMF3qULpRK3bWvOloDwFmVP4WP1DLPq3JtgWjPAxEXu74el/s970/menu_bg.png)}
div#smenu li div{background:url(https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEhrgVqRecKcnvAr5F-CGRHcO1QjM3NoK5dklwP8maLQgqr4gZ5jxxNm-UM0-nyg32aZlzTzIIOTphvZc7nBdEPV993I49ZrklknqIVj-O1nFsT_QMxZ3tn5edilTvZTV_dEzdbVrumAF84K/s209/subsubmenu-top.png) no-repeat 0 0}
div#smenu ul ul{background:url(https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEihbHmsYFLeQ-78NLdEbkQbyj7mDDaAytczzZpwROK2-MwlbmQqjcwF6GIwnYIObCqQsbkWyWqMPTYvJdXPAoAOM54sLHXyJ_LIvrrjGs434VRYRbRqqOQKpeTEW9nCXw5fA5QIZdDCfPxr/s1600/submenu-bottom.png) no-repeat 0 bottom}
div#smenu a:hover{background:url(https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEgX-lkoOVaV2xa2YP5M2WRRqlWVTutNrAv5X605Ko91sZ8WBAjK8BnXbwnAw1KkH1WLGR1QhvYFfC3blI6DRnQHutDQXo4renNSNVqGAa2pn-VDF8rvfjBBOk4IFlkmDDY6k2xATQ5w-44U/s303/selected-right-sub.png) no-repeat right -1px}
div#smenu a:hover span{background:url(https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEiP9S9CvWLFjxYWZJKlW3bG092Gy-rNlc2DWhnsLUaqTkbLiXdMja4Xa-sPnoGaYI_l3cMTVflSwbIq4Y8yIFhKriTDA4jVotQdbkMIY7fqVHbSkYSSe6yBEpLJY-D0c6gprZvoPKX7Yu4u/s45/selected-left-sub.png) no-repeat 0 -3px}
div#smenu li.current a,div#smenu ul.menu>li:hover>a{background:url(https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEgX-lkoOVaV2xa2YP5M2WRRqlWVTutNrAv5X605Ko91sZ8WBAjK8BnXbwnAw1KkH1WLGR1QhvYFfC3blI6DRnQHutDQXo4renNSNVqGAa2pn-VDF8rvfjBBOk4IFlkmDDY6k2xATQ5w-44U/s303/selected-right-sub.png) no-repeat right -1px}
div#smenu li.current a span,div#smenu ul.menu>li:hover>a span{background:url(https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEiP9S9CvWLFjxYWZJKlW3bG092Gy-rNlc2DWhnsLUaqTkbLiXdMja4Xa-sPnoGaYI_l3cMTVflSwbIq4Y8yIFhKriTDA4jVotQdbkMIY7fqVHbSkYSSe6yBEpLJY-D0c6gprZvoPKX7Yu4u/s45/selected-left-sub.png) no-repeat 0 -3px}
div#smenu ul ul a{background:none}
div#smenu ul ul a:hover{background:none}
div#smenu ul ul a:hover span{background:none}
div#smenu ul ul a.parent{background:url(https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEhgBFV46rokDgm5BbeWYS-8_Zgnn1QUVED1XHhMsOib5r4t5Lfvt16t5tr9psSptGOFX7H4txXCCrE99zTYgN5QuiZbBT60VqyfDaJveWK0TVzSc6qNX3shG5trH-U4SANJy0wbIQMZ8T9h/s18/submenu-pointer.png) no-repeat right bottom}
div#smenu ul ul a.parent span{background:none}
div#smenu ul ul a.parent:hover{background:url(https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEhgBFV46rokDgm5BbeWYS-8_Zgnn1QUVED1XHhMsOib5r4t5Lfvt16t5tr9psSptGOFX7H4txXCCrE99zTYgN5QuiZbBT60VqyfDaJveWK0TVzSc6qNX3shG5trH-U4SANJy0wbIQMZ8T9h/s18/submenu-pointer.png) no-repeat right bottom}
div#smenu ul ul a.parent:hover span{background:none}
div#smenu ul ul li.last{background:none}
div#smenu li.back{background:url(https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEiP9S9CvWLFjxYWZJKlW3bG092Gy-rNlc2DWhnsLUaqTkbLiXdMja4Xa-sPnoGaYI_l3cMTVflSwbIq4Y8yIFhKriTDA4jVotQdbkMIY7fqVHbSkYSSe6yBEpLJY-D0c6gprZvoPKX7Yu4u/s45/selected-left-sub.png) no-repeat 0 0}
div#smenu li.back .left{background:url(https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEgX-lkoOVaV2xa2YP5M2WRRqlWVTutNrAv5X605Ko91sZ8WBAjK8BnXbwnAw1KkH1WLGR1QhvYFfC3blI6DRnQHutDQXo4renNSNVqGAa2pn-VDF8rvfjBBOk4IFlkmDDY6k2xATQ5w-44U/s303/selected-right-sub.png) no-repeat right 0}

     3. Cari kode <div id='content-wrapper'> lalu copy dan pastekan kode di bawah ini tepat
         di bawahnya

<div id='topmenu'>
<div class='menu-main-navigation-container' id='smenu'>
<ul class='menu' id='menu-main-navigation'>
<li><a class='parent' href='#'><span>Home</span></a>
<div><ul>
<li><a href='#'><span>Left Sidebar Homepage</span></a></li>
<li><a href='#'><span>Homepage Layout 2</span></a></li>
</ul></div>
</li>
<li><a class='parent' href='#'><span>Sliders</span></a>
<div><ul>
<li><a href='#'><span>NivoSlider</span></a></li>
<li><a href='#'><span>VideoSlider</span></a></li>
</ul></div>
</li>
<li><a class='parent' href='#'><span>Shortcodes</span></a>
<div><ul>
<li><a href='#'><span>Columns</span></a></li>
<li><a href='#'><span>Columns Full-width</span></a></li>
<li><a href='#'><span>Images Shortcodes</span></a></li>
<li><a href='#'><span>Video Shortcodes</span></a></li>
<li><a href='#'><span>Shortcodes</span></a></li>
<li><a href='#'><span>Typography</span></a></li>
</ul></div>
</li>
<li><a class='parent' href='#'><span>Portfolio</span></a>
<div><ul>
<li><a class='parent' href='#'><span>Portfolio with Sidebar</span></a>
<div><ul>
<li><a href='#'><span>One Column</span></a></li>
<li><a href='#'><span>One Column (Big Image)</span></a></li>
</ul></div>
</li>
<li><a class='parent' href='#'><span>Full-width Portfolio</span></a>
<div><ul>
<li><a href='#'><span>One column</span></a></li>
<li><a href='#'><span>Two Column</span></a></li>
<li><a href='#'><span>Two Column (Light)</span></a></li>
<li><a href='#'><span>Three Column</span></a></li>
<li><a href='#'><span>Three Column (Light)</span></a></li>
</ul></div>
</li>
<li><a href='#'><span>Standart WP Gallery</span></a></li>
</ul></div>
</li>
<li><a href='#'><span>Blog</span></a></li>
</ul>
</div>
</div>

     4. Klik pratinjau template, dan lihat deh hasilnya hehe, jika posisi menunya sudah sesuai dengan
         yang sobat harapkan klik simpan, tapi jika belum sesuai dengan yang sobat inginkan silahkan
         letakan kode di atas di tempat yang sobat inginkan :)
Saya rasa cukup sekian dulu ya sob postingan saya kali ini tentang cara Membuat Menu Dropdown Ala ChromeGT (Red Skin), Semoga bisa bermanfaat dan membantu sobat semua, Trimakasih