Membuat Menus Mirip Seperti Di Atas Standard Share This: Facebook Twitter Google+ Stumble Digg 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('https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEhop-QDItvwnDa5ezWvZz0foRcQgymYlLZMakCL-9lMFvjZ3JC8QGV95VEDClPgNmQsNB9e9wFajf8qC4IyLasYhWYwidunsibXkGUWiYwZ0EGJPNTlsqI0tleMgukvf6OKH_v7Xw1LTxkA/s0/menu-primary-shadow.png') no-repeat bottom right}.menu-secondary-container{position:relative;height:36px;z-index:300;padding-left:12px;background:url(https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEg_hgnwkgKbTOuaWD_wGvIgx0UnvD4IOO4xatqLEdgZELnbrwUAKs_D661Hto6T2mzVJZwy8ptHzHPhFZ_mKKbvxsBi6IyvhcewQSxY0Sy-ISuhggdw6339YIsuOtLNOhdV2SlyW6sGXwjJ/s0/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(https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEg_hgnwkgKbTOuaWD_wGvIgx0UnvD4IOO4xatqLEdgZELnbrwUAKs_D661Hto6T2mzVJZwy8ptHzHPhFZ_mKKbvxsBi6IyvhcewQSxY0Sy-ISuhggdw6339YIsuOtLNOhdV2SlyW6sGXwjJ/s0/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> Email ThisBlogThis!Share to XShare to Facebook
0 komentar:
Post a Comment