Menu Top Kompi Ajaib
by kompiajaib
HTML
<div id='top-menu'>
<div class='topbar-wrapper'>
<div id='topbar'>
<ul id='top'>
<li><a href='http://www.kompiajaib.com/search/label/News%20Spot?max-results=6' target='_blank' title='News Spot'>News</a></li>
<li><a href='http://www.kompiajaib.com/search/label/Sport?max-results=6' target='_blank' title='Sport News'>Sport</a></li>
<li><a href='http://www.kompiajaib.com/search/label/Entertainment?max-results=6' target='_blank' title='Entertainment'>Entertainment</a></li>
<li><a href='http://www.kompiajaib.com/search/label/Software?max-results=6' target='_blank' title='Software'>Softwares</a></li>
<li><a href='http://www.kompiajaib.com/search/label/Game?max-results=6' target='_blank' title='Games'>Games</a></li>
<li><a href='http://www.kompiajaib.com/search/label/Blogger?max-results=6' target='_blank' title='Blogger'>Blogger</a></li>
<li><a href='http://www.kompiajaib.com/search/label/Template?max-results=6' target='_blank' title='Template'>Template</a></li>
<li><a class='trigger' href='/' title='More Menu'>More</a>
<ul>
<li><a href='http://www.kompiajaib.com/p/blog-page_8.html' target='_blank' title='Al-Quran Flash'>Al-Quran Flash</a></li>
<li><a href='http://www.kompiajaib.com/p/blog-page_1.html' target='_blank' title='Pasang Iklan'>Pasang Iklan</a></li>
<li><a href='http://www.kompiajaib.com/p/blog-page_3636.html' target='_blank' title='Software Update'>Software Update</a></li>
<li><a href='http://www.kompiajaib.com/p/blog-page_21.html' target='_blank' title='Website Tools'>Web Tools</a></li>
<li><a href='http://www.kompiajaib.com/p/play-game-online.html' target='_blank' title='Game Online'>Game Online</a></li>
<li><a href='http://www.kompiajaib.com/p/tv-online.html' target='_blank' title='Online TV'>Online TV</a></li>
<li><a href='http://www.kompiajaib.com/p/sms-gratis.html' target='_blank' title='SMS Gratis'>SMS Gratis</a></li>
<li><a href='http://www.kompiajaib.com/p/link-exchange.html' target='_blank' title='Exchange'>Exchange</a></li>
</ul></li>
</ul>
<form...CSS
#top-menu{background:#ddd;width:100%;border-top:5px solid #b0130d;margin-bottom:15px;padding:0;box-shadow:0 5px 10px #999}
.topbar-wrapper{position:relative;max-width:970px;margin:0 auto}
#topbar{width:100%;margin-left:5px}
.clearit{clear:both;height:0;line-height:0.0;font-size:0;margin:0;padding:0}
#top{width:100%}
#top,#top ul{list-style:none;font:Arial;margin:0;padding:0}
#top a{background:none;display:block;text-decoration:none;font: 13px Arial;font-weight:700;text-transform:none;color:#333;margin-right:20px;padding:6px 0 7px;border-bottom:3px solid #ddd;transition:all .3s ease-in-out;}
#top a.trigger:before{content:"";display:block;width:0;height:0;border-style:solid;border-color:#333 transparent transparent transparent;float:right;border-width:8px 5px 0 5px;margin:5px 0 0 5px;transition:all .3s ease-in-out;}
#top a.trigger:hover:before{content:"";display:block;width:0;height:0;border-style:solid;border-color:#b0130d transparent transparent transparent;float:right;border-width:8px 5px 0 5px;margin:5px 0 0 5px;}
#top li{float:left;position:static;width:auto}
#top li ul,#top ul li{width:150px;background:#ddd;box-shadow:1px 1px 3px #999;padding-left:5px}
#top ul li a{text-align:left;color:#333;text-transform:none;font:bold 13px Arial;border:none;padding:5px 0;}
#top li ul{z-index:100;position:absolute;display:none;background:none;padding:0;margin:0}
#top a:hover {color:#b0130d;border-bottom:3px solid #b0130d;}
#top li:hover ul,#top li.hvr ul{display:block}
#top ul li a:hover{color:#b0130d;border-bottom:none;padding-left:10px}
#top a.trigger:hover{border-bottom:3px solid #ddd}
#search input[type=text]:hover,#search input[type=text]:focus{width:200px;border:1px solid #b0130d;padding-left:25px}
#search input[type=text]{background:#fff url(http://3.bp.blogspot.com/-4l8y1Ui2vIY/UgB9_laN9JI/AAAAAAAAZpM/mwVYMnr-Eg0/s1600/search.png)no-repeat center left 3px;width:0;font-size:13px;color:#222;transition:all .5s...