Arahkan Cursor Sobat pada Contoh Menu horisontal  dibawah ini

• Home
• Tips & trik
• Forums
• Software
• Chat Box

<style type="text/css">
#tabs {
 float:left;
 width:100%;
 height:auto;
 font-size:93%;
line-height:normal;
 border-bottom:grey;
 margin-bottom:1em;
 overflow:hidden;
 }

#tabs ul {
 margin:0;
 padding:10px 10px 0 0px;
 list-style:none;

 }

#tabs li {
 display:inline;
 margin:0;
 padding:0;
 }

#tabs a {
 float:left;
 -moz-border-radius: 10px 10px 0px 0px;-webkit-border-radius: 10px 10px 0px 0px;-o-border-radius:10px 10px 0px 0px; background: black;
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;
 margin:2px;
 padding:0px 5px 0px 5px;
 font-family: Comic Sans MS,sans-serif;
 font-size: large;
 }

#tabs a span {
 float:left;
 display:block;
 padding:4px 6px 4px 6px;
 margin-right:2px;
 color:#FFF;
 }

#tabs a span {float:none;}

/* End IE5-Mac hack */
#tabs a:hover span {
 }

#tabs a:hover {
background: -moz-linear-gradient(center top, #7ad690, #3ec05c 25%, #298a40 45%, #3ec05c 85%, #7ad690);
background: -webkit-gradient(linear, center top, center bottom, from(#7ad690), color-stop(25%, #3ec05c), color-stop(45%, #298a40), color-stop(85%, #3ec05c), to(#7ad690)); transform:rotate(-6deg); -moz-transform:rotate(-6deg); -webkit-transform:rotate(-6deg); -o-transform:rotate(-6deg);
}
#tabs a:hover span {
background: -moz-linear-gradient(center top, #7ad690, #3ec05c 25%, #298a40 45%, #3ec05c 85%, #7ad690);
background: -webkit-gradient(linear, center top, center bottom, from(#7ad690), color-stop(25%, #3ec05c), color-stop(45%, #298a40), color-stop(85%, #3ec05c), to(#7ad690)); transform:rotate(-6deg); -moz-transform:rotate(-6deg); -webkit-transform:rotate(-6deg); -o-transform:rotate(-6deg);
}
</style>

<div id="tabs">
  <ul>
    <li></li>
    <li><a href="URL Blog SOBAT"><span>Menu 1</span></a></li>
    <li><a href="URL Blog SOBAT"><span>Menu 2</span></a></li>
    <li><a href="URL Blog SOBAT"><span>Menu 3</span></a></li>
    <li><a href="URL Blog SOBAT"><span>Menu 4</span></a></li>
    <li><a href="URL Blog SOBAT"><span>Menu 5</span></a></li>
    <li><a href="URL Blog SOBAT"><span>Menu 6</span></a></li>
  </ul>
</div>

Selamat Mencoba Semoga bermanfaat

Artikel terkait Lainnya