Red Menu Horizontal Menu Red Menu Horizontal Menu

Demo Red Menu Horisontal

• Home
• Menu 1
• Menu 2
• Menu 3
• Menu 4
• Menu 5

 
Kode CSSnya

<style type="text/css">
#binkbenkPositioner {width:100%; position:relative; float:left; top:-40px; margin-bottom:-40px;z-index:999; }

#binkbenkHolder {position:relative; float:left; left:50%;}

#binkbenk,
#binkbenk ul {padding:0; margin:0; list-style:none; font: 15px Comic Sans MS, sans-serif; background: -moz-linear-gradient(center top, #9f9f9f, #686868 25%, #2a2a2a 45%, #686868 85%, #9f9f9f);
background: -webkit-gradient(linear, center top, center bottom, from(#9f9f9f), color-stop(25%, #686868), color-stop(45%, #2a2a2a), color-stop(85%, #686868), to(#9f9f9f));  position:relative; z-index:100;}
#binkbenk {height:45px; float:left; padding:0 ;-moz-border-radius: 10px 10px 10px 10px;  background: -moz-linear-gradient(center top, #9f9f9f, #686868 25%, #2a2a2a 45%, #686868 85%, #9f9f9f);
background: -webkit-gradient(linear, center top, center bottom, from(#9f9f9f), color-stop(25%, #686868), color-stop(45%, #2a2a2a), color-stop(85%, #686868), to(#9f9f9f));   border: 4px inset red; position:relative; right:50%;}
#binkbenk ul {position:absolute; left:-9999px; top:-9999px;}

#binkbenk table {border-collapse:collapse; margin:-1px; padding:0; width:0; height:0;}
#binkbenk li {float:left;}

#binkbenk li a {display:block; float:left; color:#fff; height:30px; padding:0px 10px 0px  0px; line-height:30px; text-decoration:none; -moz-border-radius: 10px 10px 10px 10px; background: -moz-linear-gradient(center top, #f5795d, #e55e3f 25%, #d02700 45%, #e55e3f 85%, #f5795d);
background: -webkit-gradient(linear, center top, center bottom, from(#f5795d), color-stop(25%, #e55e3f), color-stop(45%, #d02700), color-stop(85%, #e55e3f), to(#f5795d)); border: 4px inset white; }
#binkbenk li a.sub {-moz-border-radius: 10px 10px 10px 10px; background: -moz-linear-gradient(center top, #f5795d, #e55e3f 25%, #d02700 45%, #e55e3f 85%, #f5795d);
background: -webkit-gradient(linear, center top, center bottom, from(#f5795d), color-stop(25%, #e55e3f), color-stop(45%, #d02700), color-stop(85%, #e55e3f), to(#f5795d));  border: 3px inset white; }
#binkbenk li a b {display:block; float:left; height:40px;  padding:0px 0px 0px 10px; cursor:pointer;}

#binkbenk li:hover {position:relative; z-index:100;}
#binkbenk a:hover {position:relative; z-index:100; color:#fc0;}
#binkbenk a.sub:hover {background: -moz-linear-gradient(center top, #f5795d, #e55e3f 25%, #d02700 45%, #e55e3f 85%, #f5795d);
background: -webkit-gradient(linear, center top, center bottom, from(#f5795d), color-stop(25%, #e55e3f), color-stop(45%, #d02700), color-stop(85%, #e55e3f), to(#f5795d)); }

#binkbenk li:hover > a {color:#fc0;}
#binkbenk li:hover > a.sub {background: -moz-linear-gradient(center top, #f5795d, #e55e3f 25%, #d02700 45%, #e55e3f 85%, #f5795d);
background: -webkit-gradient(linear, center top, center bottom, from(#f5795d), color-stop(25%, #e55e3f), color-stop(45%, #d02700), color-stop(85%, #e55e3f), to(#f5795d)); }

#binkbenk :hover ul {left:0; top:40px; z-index:300; width:130px; padding-top:4px; background:url(trans.gif);}
#binkbenk :hover ul li a {height:25px; width:120px; padding:0 0 0 10px; line-height:25px; background: -moz-linear-gradient(center top, #f5795d, #e55e3f 25%, #d02700 45%, #e55e3f 85%, #f5795d);
background: -webkit-gradient(linear, center top, center bottom, from(#f5795d), color-stop(25%, #e55e3f), color-stop(45%, #d02700), color-stop(85%, #e55e3f), to(#f5795d));  color:#fff; border-bottom:1px solid #a3b6c4; font-size:11px;}

#binkbenk a:hover {
background: -moz-linear-gradient(center top, #9f9f9f, #686868 25%, #2a2a2a 45%, #686868 85%, #9f9f9f);
background: -webkit-gradient(linear, center top, center bottom, from(#9f9f9f), color-stop(25%, #686868), color-stop(45%, #2a2a2a), color-stop(85%, #686868), to(#9f9f9f));   transform:rotate(10deg); -moz-transform:rotate(10deg); -webkit-transform:rotate(10deg); -o-transform:rotate(10deg); font-size: 18px;}
</style>

<div id="binkbenkPositioner">
<div id="binkbenkHolder">
<ul id="binkbenk">
<li><a href="http://URL BLOG SOBATl"><b>Home</b></a></li>
<li><a href="http://URL BLOG SOBAT"><b>Menu 1</b></a></li>
<li><a href="http://URL BLOG SOBAT"><b>Menu 2</b></a></li>
<li><a href="http://URL BLOG SOBAT"><b>Menu 3</b></a></li>
<li><a href="http://URL BLOG SOBAT"><b>Menu 4</b></a></li>
<li><a href="http://URL BLOG SOBAT"><b>Menu 5</b></a></li>
</ul>
</div>
</div>

Copy Kode CSS diatas dan Letakan Dalam Gadget HTML/Javascript


Menu-Menu Lainnya

CSS Animasi Menu Pull Up
CSS Menu Drop Down
CSS menu drop down melayang
CSS Menu Horisontal
CSS Menu Button 
CSS Tab Menu View
Menu Drop Up Melayang
Menu tab Drop Down Horizontal