Membuat Menus Mirip Seperti Di Atas

Gunakan Code ini untuk menu yang sama seperti diatas layar kamu.

Code CSS

.menus,.menus *{margin:0;padding:0;list-style:none;list-style-type:none;line-height:1.0}.menus ul{position:absolute;top:-999em;width:100%}
.menus ul li{width:100%}
.menus li:hover{visibility:inherit}
.menus li{float:left;position:relative}
.menus a{display:block;position:relative}
.menus li:hover ul,.menus li.sfHover ul{left:0;top:100%;z-index:99}
.menus li:hover li ul,.menus li.sfHover li ul{top:-999em}
.menus li li:hover ul,.menus li li.sfHover ul{left:100%;top:0}
.menus li li:hover li ul,.menus li li.sfHover li ul{top:-999em}
.menus li li li:hover ul,.menus li li li.sfHover ul{left:100%;top:0}
.sf-shadow ul{padding:0 8px 9px 0;-moz-border-radius-bottomleft:17px;-moz-border-radius-topright:17px;-webkit-border-top-right-radius:17px;-webkit-border-bottom-left-radius:17px}
.menus .sf-shadow ul.sf-shadow-off{background:transparent}
.menu-primary-container{padding:12px 0 0 0;position:relative;height:38px;z-index:400;float:left}
.menu-primary{}
.menu-primary ul{min-width:160px}
.menu-primary li a{color:#555454;padding:12px 15px;text-decoration:none;text-transform:uppercase;font:normal 11px Arial,Helvetica,Sans-serif}
.menu-primary li a:hover,.menu-primary li a:active,.menu-primary li a:focus,.menu-primary li:hover > a,.menu-primary li.current-cat > a,.menu-primary li.current_page_item > a,.menu-primary li.current-menu-item > a{color:#017DB0;outline:0}
.menu-primary li li a{color:#fff;text-transform:none;background:#017DB0;padding:10px 15px;margin:0;border:0;font-weight:normal}
.menu-primary li li a:hover,.menu-primary li li a:active,.menu-primary li li a:focus,.menu-primary li li:hover > a,.menu-primary li li.current-cat > a,.menu-primary li li.current_page_item > a,.menu-primary li li.current-menu-item > a{color:#fff;background:#2291BF;outline:0;border-bottom:0;text-decoration:none}
.menu-primary a.sf-with-ul{padding-right:20px;min-width:1px}
.menu-primary .sf-sub-indicator{position:absolute;display:block;overflow:hidden;right:0;top:0;padding:11px 10px 0 0}
.menu-primary li li .sf-sub-indicator{padding:9px 10px 0 0}
.wrap-menu-primary .sf-shadow ul{background:url('http://1.bp.blogspot.com/-PpBp9mt_bzM/TqLazoJnfoI/AAAAAAAAAXY/sK84Qhs4WsY/s000/menu-primary-shadow.png') no-repeat bottom right}
.menu-secondary-container{position:relative;height:36px;z-index:300;padding-left:12px;background:url(http://1.bp.blogspot.com/-aYyg4um7Jnc/TqLa0MxGmEI/AAAAAAAAAXg/dF06PwrR8yA/s000/menu-secondary-bg.png) left top repeat-x;-moz-border-radius:15px;-khtml-border-radius:15px;-webkit-border-radius:15px;border-radius:15px;border:1px solid #2092C0}
.menu-secondary{}
.menu-secondary ul{min-width:160px}
.menu-secondary li a{color:#FFF;padding:12px 15px 10px 15px;text-decoration:none;text-transform:uppercase;font:bold 12px Arial,Helvetica,Sans-serif}
.menu-secondary li a:hover,.menu-secondary li a:active,.menu-secondary li a:focus,.menu-secondary li:hover > a,.menu-secondary li.current-cat > a,.menu-secondary li.current_page_item > a,.menu-secondary li.current-menu-item > a{color:#FFF;background:url(http://1.bp.blogspot.com/-aYyg4um7Jnc/TqLa0MxGmEI/AAAAAAAAAXg/dF06PwrR8yA/s000/menu-secondary-bg.png) left -136px repeat-x;outline:0}
.menu-secondary li li a{color:#FFF;background:#158FC2;padding:10px 15px;text-transform:none;margin:0;font-weight:normal}
.menu-secondary li li a:hover,.menu-secondary li li a:active,.menu-secondary li li a:focus,.menu-secondary li li:hover > a,.menu-secondary li li.current-cat > a,.menu-secondary li li.current_page_item > a,.menu-secondary li li.current-menu-item > a{color:#FFF;background:#26ABE3;outline:0}
.menu-secondary a.sf-with-ul{padding-right:26px;min-width:1px}
.menu-secondary .sf-sub-indicator{position:absolute;display:block;overflow:hidden;right:0;top:0;padding:10px 13px 0 0}
.menu-secondary li li .sf-sub-indicator{padding:9px 13px 0 0}

Code HTML

<div class='span-24'>
<div class='menu-secondary-container'>
<ul class='menus menu-secondary'>
<li><a href='http://trevolutions.blogspot.com/'>Home</a></li>
<li><a href='#'>Downloads</a>

<ul class='children'>
<li><a href='#'>My Plugins</a></li>
<li><a href='#'>My Theme</a></li>
<li><a href='#'>My Product</a>
</li>
</ul>
</li>
<li><a href='#'>MyBB</a>
<ul class='children'>
<li><a href='#'>MyBB Mods</a>
<ul class='children'>
<li><a href='http://mods.mybb.com/theme'>Theme</a></li>

<li><a href='http://mods.mybb.com/mods'>Plugins</a></li>
<li><a href='http://mods.mybb.com/resources'>Source</a></li>
</ul>
</li>
<li><a href='http://community.mybb.com/'>Community Forums</a></li>
<li><a href='http://wiki.mybb.com/'>Wiki</a></li>
<li><a href='http://www.mybbindonesia.com'>MyBB Indonesia</a></li>
</ul>
</li>
<li><a href='#'>Featured</a></li>
<li><a href='#'>Partner</a>

<ul class='children'>
<li><a href='#'>MyBB Indonesia</a></li>
<li><a href='#'>Public Indonesia</a></li>
<li><a href='http://indomodding.tk/index.php'>IndoModding</a></li>
</ul>
</li>
<li><a href='#'>Uncategorized</a></li>
</ul>
</div>
</div>