How To Create Button Menu Horizontal Menu Horizontal II (CSS On Maskibow)

How To Create Button Menu Horizontal Menu Horizontal II (CSS On Maskibow) - On Maskibow

How To Create Button Menu Horizontal Menu Horizontal II (CSS On Maskibow)

Menu Button, Button Sample Menu, Menu Button Gallery Menu Button Tutorial, Script Menu Button, Vista Button Menu, Drop Down Menu Button, Button Horizontal Menu, Vertical Menu Button, Button Menu CSS, JavaScript Menu Button, Button Menu Java Script, HTML Menu Button, Button Menu How to create, make Button Menu Web Button Menu Button Menu Blogger, Button Menu Design

Original Script By	: Maskibow
Revised Script By	: Maskibow
Script Work In	: Mozilla Firefox, Chrome, Opera

Description :

Continued from the previous menu Button, this one single button style either a horizontal line on the menu button, and multiple on its menu list. As always I love some of the same sample will differ only in his design style. This menu button is actually still using the same java script on the previous menu button
Button drop-down menu is very simple just to play on his CSS style effects only, and based on tags <table>, <div> and <span>
To add its menu or you want edit in this script has been given the comments so that you can easily info to edit accordance with what you want ... yes if still confused or have additional info we can equally share in here ...

example :

Point your mouse towards the chart then it will exit the menu list in the drop-down menu

For example his page you can see it inHERE Skip Adf.ly Ad on the top right corner and then download and open

Step 1: Copy and paste the script below and place the position under <HEAD> code on your webpage or it could be on the post if you write posting using HTML:

Choose All

<style type="text/css">
a {text-decoration: none;}
/*List Menu Setting*/
.mkbsamplebtn,.mkbsamplebtn a{
  height: 28px;
  width: 120px;
  padding-left: 5px;
  padding-right: 5px;
  padding-top: 2px;
  padding-bottom: 2px;
  color: orange;
  valign: bottom;
  text-align: center;
  font: normal 13px Verdana;
  list-style-type: none;
  text-decoration: none;
  text-shadow: 3px 3px 3px black;
  line-height: 25px;
  border: 2px ridge orange;
  border-radius: 10px 10px 10px;
  -moz-border-radius: 10px 10px 10px;
  -webkit-border-radius: 10px 10px 10px;
  }
.mkbsamplebtn:hover,.mkbsamplebtn a:hover{
  color: black;
  background-color: orange;
  }
/*Button Menu Posisi Setting*/
.mkbbtndiv, #sample1, #sample2{
  width:500;
  list-style-type: none;
  text-decoration: none;
  }
/*Button Menu Setting*/
.mkbsamplebtnbtn,.mkbsamplebtnbtn a{
  padding-top: 2px;
  padding-bottom: 2px;
  height: 25px;
  width: 120px;
  list-style-type: none;
  text-decoration: none;
  text-align: center;
  font: bold 14px Verdana;
  text-shadow: 3px 3px 3px black;
  border: 0px solid;
  -moz-border-radius: 15px;
  -webkit-border-radius: 15px;
  border-radius: 15px;
  }
.mkbsamplebtnbtn:hover,.mkbsamplebtnbtn a:hover{
  color: lime;
  }
/* setting warna border*/
  .batangtop, .menulistmkbbtn, .mkbsamplebtn, .mkbsamplebtn a, .mkbsamplebtn:hover, 
  .mkbsamplebtn a:hover, .mkbsamplebtnbtn, .mkbsamplebtnbtn a{
  border-color: orange;
  }
/* setting warna background*/
  .batangtop, .menulistmkbbtn, .mkbsamplebtn, .mkbsamplebtn a, .mkbsamplebtnbtn, 
  .mkbsamplebtnbtn a{
  background-color: #990099; 
  color: orange;
  }
/* setting Batang atas button*/
  .batangtop{
  width: 100%;
  height: 28px;
  border: 2px solid orange;
  border-color: orange;
  -moz-border-radius: 15px;
  -webkit-border-radius: 15px;
  border-radius: 15px;
  -moz-box-shadow: 4px 4px 4px gray;
  -webkit-box-shadow: 4px 4px 4px gray;
  -goog-ms-box-shadow: 4px 4px 4px gray;
  box-shadow: 4px 4px 4px gray;
  }
</style>
<script language="JavaScript">
  var linktext=new Array (0)
  
  linktext[0]="<div align='left'> <a class='mkbsamplebtn' href='http://www.maskibow.blogspot.com'>Al-Qur'an 
  OnLine</a> <a class='mkbsamplebtn' href='http://www.maskibow.blogspot.com'>Playing 
  Game</a> <a class='mkbsamplebtn' href='http://www.maskibow.blogspot.com'>Watching 
  TV</a> <a class='mkbsamplebtn' href='http://www.maskibow.blogspot.com'>Info 
  Jual-Beli</a> <a class='mkbsamplebtn' href='http://www.maskibow.blogspot.com'>FaceBook</a> 
  </div>"
  linktext[1]="<div align='left'> <a class='mkbsamplebtn' href='http://www.maskibow.blogspot.com/search/label/Antivirus'>Anti 
  Virus</a> <a class='mkbsamplebtn' href='http://www.maskibow.blogspot.com/search/label/Billing'>Billing</a> 
  <a class='mkbsamplebtn' href='http://www.maskibow.blogspot.com/search/label/Design'>Design</a> 
  <a class='mkbsamplebtn' href='http://www.maskibow.blogspot.com/search/label/Tools'>Tools</a> 
  <a class='mkbsamplebtn' href='http://www.maskibow.blogspot.com/search/label/Multimedia'>Multimedia</a> 
  </div>"
  linktext[2]="<div align='left'> <a class='mkbsamplebtn' href='http://www.maskibow.blogspot.com/search/label/Action'>Action</a> 
  <a class='mkbsamplebtn' href='http://www.maskibow.blogspot.com/search/label/RPG'>R 
  P G</a> <a class='mkbsamplebtn' href='http://www.maskibow.blogspot.com/search/label/RTS'>R 
  T S</a> <a class='mkbsamplebtn' href='http://www.maskibow.blogspot.com/search/label/Sport'>Sport</a> 
  </div>"
  linktext[3]="<div align='left'> <a class='mkbsamplebtn' href='http://www.maskibow.blogspot.com/search/label/TWeb'>Tutorial</a> 
  <a class='mkbsamplebtn' href='http://www.maskibow.blogspot.com/search/label/TWeb'>HTML, 
  CSS, Java</a> <a class='mkbsamplebtn' href='http://www.maskibow.blogspot.com/search/label/TWeb'>Blogger</a> 
  <a class='mkbsamplebtn' href='http://www.maskibow.blogspot.com/search/label/Barang'>Info 
  Jual-Beli</a> </div>"
var ns6=document.getElementById&&!document.all
  var ie=document.all
function show_text(thetext, whichdiv){
  if (ie) eval("document.all."+whichdiv).innerHTML=linktext[thetext]
  else if (ns6) document.getElementById(whichdiv).innerHTML=linktext[thetext]
  }
function resetit(whichspan){
  if (ie) eval("document.all."+whichspan).innerHTML=''
  else if (ns6) document.getElementById(whichspan).innerHTML=''
  }
</script>

Step 2: If the above is already running then, Copy and put the script below under <BODY> code on your webpage or could also be on the post if you write a post using HTML:

Choose All

<div class="mkbbtndiv" style="position:absolute;"> 
<div class="batangtop">
<table align="left" id="sample1">
<tr valign="top" > 
<td class="mkbsamplebtnbtn"><a href="##" onmouseover="show_text(0,'div0');resetit('div1');resetit('div2');resetit('div3');"> 

On Maskibow</a></td>
<td class="mkbsamplebtnbtn"><a href="##" onmouseover="show_text(1,'div1');resetit('div0');resetit('div2');resetit('div3');"> 

Free Software</a></td>
<td class="mkbsamplebtnbtn"><a href="##" onmouseover="show_text(2,'div2');resetit('div0');resetit('div1');resetit('div3');"> 

Free Games</a></td>
<td class="mkbsamplebtnbtn"><a href="##" onmouseover="show_text(3,'div3');resetit('div0');resetit('div1');resetit('div2');"> 

Tips 'n Trik</a></td>

</tr>
</table>
<br/>
<table border="0" id="sample2">
<tr>
<td><div align="center"><span id="div0"></span><span 
id="div1"></span><span id="div2"></span><span 
id="div3"></span> 
</div>
</td>
</tr>
<tr onmouseover="resetit('div0');resetit('div1');resetit('div2');resetit('div3');"> 


<td colspan="4"> 
</td>
</tr>
</table>
  </div>
  </div>

Note: To Friends of the blogger if you want to add this script on the page blogs can use the methods above, but you can also easily with how to enter an existing script block above the widget you bro .. try it select the widget HTML / Java script and input it into two widgets into you!

Label: Button Menu, Tutorial, Tutorial 2, TWeb, TWeb 5

Share This Page !!!

Artikel Lainnya :

Komentar : 0 Komentar

Posting Komentar

Original Script By	: Maskibow
Revised Script By	: Maskibow
Script Work In	: Mozilla Firefox, Chrome, Opera

Description :

example :

Point your mouse towards the chart then it will exit the menu list in the drop-down menu

Choose All

<style type="text/css">
a {text-decoration: none;}
/*List Menu Setting*/
.mkbsamplebtn,.mkbsamplebtn a{
  height: 28px;
  width: 120px;
  padding-left: 5px;
  padding-right: 5px;
  padding-top: 2px;
  padding-bottom: 2px;
  color: orange;
  valign: bottom;
  text-align: center;
  font: normal 13px Verdana;
  list-style-type: none;
  text-decoration: none;
  text-shadow: 3px 3px 3px black;
  line-height: 25px;
  border: 2px ridge orange;
  border-radius: 10px 10px 10px;
  -moz-border-radius: 10px 10px 10px;
  -webkit-border-radius: 10px 10px 10px;
  }
.mkbsamplebtn:hover,.mkbsamplebtn a:hover{
  color: black;
  background-color: orange;
  }
/*Button Menu Posisi Setting*/
.mkbbtndiv, #sample1, #sample2{
  width:500;
  list-style-type: none;
  text-decoration: none;
  }
/*Button Menu Setting*/
.mkbsamplebtnbtn,.mkbsamplebtnbtn a{
  padding-top: 2px;
  padding-bottom: 2px;
  height: 25px;
  width: 120px;
  list-style-type: none;
  text-decoration: none;
  text-align: center;
  font: bold 14px Verdana;
  text-shadow: 3px 3px 3px black;
  border: 0px solid;
  -moz-border-radius: 15px;
  -webkit-border-radius: 15px;
  border-radius: 15px;
  }
.mkbsamplebtnbtn:hover,.mkbsamplebtnbtn a:hover{
  color: lime;
  }
/* setting warna border*/
  .batangtop, .menulistmkbbtn, .mkbsamplebtn, .mkbsamplebtn a, .mkbsamplebtn:hover, 
  .mkbsamplebtn a:hover, .mkbsamplebtnbtn, .mkbsamplebtnbtn a{
  border-color: orange;
  }
/* setting warna background*/
  .batangtop, .menulistmkbbtn, .mkbsamplebtn, .mkbsamplebtn a, .mkbsamplebtnbtn, 
  .mkbsamplebtnbtn a{
  background-color: #990099; 
  color: orange;
  }
/* setting Batang atas button*/
  .batangtop{
  width: 100%;
  height: 28px;
  border: 2px solid orange;
  border-color: orange;
  -moz-border-radius: 15px;
  -webkit-border-radius: 15px;
  border-radius: 15px;
  -moz-box-shadow: 4px 4px 4px gray;
  -webkit-box-shadow: 4px 4px 4px gray;
  -goog-ms-box-shadow: 4px 4px 4px gray;
  box-shadow: 4px 4px 4px gray;
  }
</style>
<script language="JavaScript">
  var linktext=new Array (0)
  
  linktext[0]="<div align='left'> <a class='mkbsamplebtn' href='http://www.maskibow.blogspot.com'>Al-Qur'an 
  OnLine</a> <a class='mkbsamplebtn' href='http://www.maskibow.blogspot.com'>Playing 
  Game</a> <a class='mkbsamplebtn' href='http://www.maskibow.blogspot.com'>Watching 
  TV</a> <a class='mkbsamplebtn' href='http://www.maskibow.blogspot.com'>Info 
  Jual-Beli</a> <a class='mkbsamplebtn' href='http://www.maskibow.blogspot.com'>FaceBook</a> 
  </div>"
  linktext[1]="<div align='left'> <a class='mkbsamplebtn' href='http://www.maskibow.blogspot.com/search/label/Antivirus'>Anti 
  Virus</a> <a class='mkbsamplebtn' href='http://www.maskibow.blogspot.com/search/label/Billing'>Billing</a> 
  <a class='mkbsamplebtn' href='http://www.maskibow.blogspot.com/search/label/Design'>Design</a> 
  <a class='mkbsamplebtn' href='http://www.maskibow.blogspot.com/search/label/Tools'>Tools</a> 
  <a class='mkbsamplebtn' href='http://www.maskibow.blogspot.com/search/label/Multimedia'>Multimedia</a> 
  </div>"
  linktext[2]="<div align='left'> <a class='mkbsamplebtn' href='http://www.maskibow.blogspot.com/search/label/Action'>Action</a> 
  <a class='mkbsamplebtn' href='http://www.maskibow.blogspot.com/search/label/RPG'>R 
  P G</a> <a class='mkbsamplebtn' href='http://www.maskibow.blogspot.com/search/label/RTS'>R 
  T S</a> <a class='mkbsamplebtn' href='http://www.maskibow.blogspot.com/search/label/Sport'>Sport</a> 
  </div>"
  linktext[3]="<div align='left'> <a class='mkbsamplebtn' href='http://www.maskibow.blogspot.com/search/label/TWeb'>Tutorial</a> 
  <a class='mkbsamplebtn' href='http://www.maskibow.blogspot.com/search/label/TWeb'>HTML, 
  CSS, Java</a> <a class='mkbsamplebtn' href='http://www.maskibow.blogspot.com/search/label/TWeb'>Blogger</a> 
  <a class='mkbsamplebtn' href='http://www.maskibow.blogspot.com/search/label/Barang'>Info 
  Jual-Beli</a> </div>"
var ns6=document.getElementById&&!document.all
  var ie=document.all
function show_text(thetext, whichdiv){
  if (ie) eval("document.all."+whichdiv).innerHTML=linktext[thetext]
  else if (ns6) document.getElementById(whichdiv).innerHTML=linktext[thetext]
  }
function resetit(whichspan){
  if (ie) eval("document.all."+whichspan).innerHTML=''
  else if (ns6) document.getElementById(whichspan).innerHTML=''
  }
</script>

Step 2: If the above is already running then, Copy and put the script below under <BODY> code on your webpage or could also be on the post if you write a post using HTML:

Choose All

<div class="mkbbtndiv" style="position:absolute;"> 
<div class="batangtop">
<table align="left" id="sample1">
<tr valign="top" > 
<td class="mkbsamplebtnbtn"><a href="##" onmouseover="show_text(0,'div0');resetit('div1');resetit('div2');resetit('div3');"> 

On Maskibow</a></td>
<td class="mkbsamplebtnbtn"><a href="##" onmouseover="show_text(1,'div1');resetit('div0');resetit('div2');resetit('div3');"> 

Free Software</a></td>
<td class="mkbsamplebtnbtn"><a href="##" onmouseover="show_text(2,'div2');resetit('div0');resetit('div1');resetit('div3');"> 

Free Games</a></td>
<td class="mkbsamplebtnbtn"><a href="##" onmouseover="show_text(3,'div3');resetit('div0');resetit('div1');resetit('div2');"> 

Tips 'n Trik</a></td>

</tr>
</table>
<br/>
<table border="0" id="sample2">
<tr>
<td><div align="center"><span id="div0"></span><span 
id="div1"></span><span id="div2"></span><span 
id="div3"></span> 
</div>
</td>
</tr>
<tr onmouseover="resetit('div0');resetit('div1');resetit('div2');resetit('div3');"> 


<td colspan="4"> 
</td>
</tr>
</table>
  </div>
  </div>

Label: Button Menu, Tutorial, Tutorial 2, TWeb, TWeb 5

Original Script By	: Maskibow
Revised Script By	: Maskibow
Script Work In	: Mozilla Firefox, Chrome, Opera

Description :

example :

Point your mouse towards the chart then it will exit the menu list in the drop-down menu

Choose All

<style type="text/css">
a {text-decoration: none;}
/*List Menu Setting*/
.mkbsamplebtn,.mkbsamplebtn a{
  height: 28px;
  width: 120px;
  padding-left: 5px;
  padding-right: 5px;
  padding-top: 2px;
  padding-bottom: 2px;
  color: orange;
  valign: bottom;
  text-align: center;
  font: normal 13px Verdana;
  list-style-type: none;
  text-decoration: none;
  text-shadow: 3px 3px 3px black;
  line-height: 25px;
  border: 2px ridge orange;
  border-radius: 10px 10px 10px;
  -moz-border-radius: 10px 10px 10px;
  -webkit-border-radius: 10px 10px 10px;
  }
.mkbsamplebtn:hover,.mkbsamplebtn a:hover{
  color: black;
  background-color: orange;
  }
/*Button Menu Posisi Setting*/
.mkbbtndiv, #sample1, #sample2{
  width:500;
  list-style-type: none;
  text-decoration: none;
  }
/*Button Menu Setting*/
.mkbsamplebtnbtn,.mkbsamplebtnbtn a{
  padding-top: 2px;
  padding-bottom: 2px;
  height: 25px;
  width: 120px;
  list-style-type: none;
  text-decoration: none;
  text-align: center;
  font: bold 14px Verdana;
  text-shadow: 3px 3px 3px black;
  border: 0px solid;
  -moz-border-radius: 15px;
  -webkit-border-radius: 15px;
  border-radius: 15px;
  }
.mkbsamplebtnbtn:hover,.mkbsamplebtnbtn a:hover{
  color: lime;
  }
/* setting warna border*/
  .batangtop, .menulistmkbbtn, .mkbsamplebtn, .mkbsamplebtn a, .mkbsamplebtn:hover, 
  .mkbsamplebtn a:hover, .mkbsamplebtnbtn, .mkbsamplebtnbtn a{
  border-color: orange;
  }
/* setting warna background*/
  .batangtop, .menulistmkbbtn, .mkbsamplebtn, .mkbsamplebtn a, .mkbsamplebtnbtn, 
  .mkbsamplebtnbtn a{
  background-color: #990099; 
  color: orange;
  }
/* setting Batang atas button*/
  .batangtop{
  width: 100%;
  height: 28px;
  border: 2px solid orange;
  border-color: orange;
  -moz-border-radius: 15px;
  -webkit-border-radius: 15px;
  border-radius: 15px;
  -moz-box-shadow: 4px 4px 4px gray;
  -webkit-box-shadow: 4px 4px 4px gray;
  -goog-ms-box-shadow: 4px 4px 4px gray;
  box-shadow: 4px 4px 4px gray;
  }
</style>
<script language="JavaScript">
  var linktext=new Array (0)
  
  linktext[0]="<div align='left'> <a class='mkbsamplebtn' href='http://www.maskibow.blogspot.com'>Al-Qur'an 
  OnLine</a> <a class='mkbsamplebtn' href='http://www.maskibow.blogspot.com'>Playing 
  Game</a> <a class='mkbsamplebtn' href='http://www.maskibow.blogspot.com'>Watching 
  TV</a> <a class='mkbsamplebtn' href='http://www.maskibow.blogspot.com'>Info 
  Jual-Beli</a> <a class='mkbsamplebtn' href='http://www.maskibow.blogspot.com'>FaceBook</a> 
  </div>"
  linktext[1]="<div align='left'> <a class='mkbsamplebtn' href='http://www.maskibow.blogspot.com/search/label/Antivirus'>Anti 
  Virus</a> <a class='mkbsamplebtn' href='http://www.maskibow.blogspot.com/search/label/Billing'>Billing</a> 
  <a class='mkbsamplebtn' href='http://www.maskibow.blogspot.com/search/label/Design'>Design</a> 
  <a class='mkbsamplebtn' href='http://www.maskibow.blogspot.com/search/label/Tools'>Tools</a> 
  <a class='mkbsamplebtn' href='http://www.maskibow.blogspot.com/search/label/Multimedia'>Multimedia</a> 
  </div>"
  linktext[2]="<div align='left'> <a class='mkbsamplebtn' href='http://www.maskibow.blogspot.com/search/label/Action'>Action</a> 
  <a class='mkbsamplebtn' href='http://www.maskibow.blogspot.com/search/label/RPG'>R 
  P G</a> <a class='mkbsamplebtn' href='http://www.maskibow.blogspot.com/search/label/RTS'>R 
  T S</a> <a class='mkbsamplebtn' href='http://www.maskibow.blogspot.com/search/label/Sport'>Sport</a> 
  </div>"
  linktext[3]="<div align='left'> <a class='mkbsamplebtn' href='http://www.maskibow.blogspot.com/search/label/TWeb'>Tutorial</a> 
  <a class='mkbsamplebtn' href='http://www.maskibow.blogspot.com/search/label/TWeb'>HTML, 
  CSS, Java</a> <a class='mkbsamplebtn' href='http://www.maskibow.blogspot.com/search/label/TWeb'>Blogger</a> 
  <a class='mkbsamplebtn' href='http://www.maskibow.blogspot.com/search/label/Barang'>Info 
  Jual-Beli</a> </div>"
var ns6=document.getElementById&&!document.all
  var ie=document.all
function show_text(thetext, whichdiv){
  if (ie) eval("document.all."+whichdiv).innerHTML=linktext[thetext]
  else if (ns6) document.getElementById(whichdiv).innerHTML=linktext[thetext]
  }
function resetit(whichspan){
  if (ie) eval("document.all."+whichspan).innerHTML=''
  else if (ns6) document.getElementById(whichspan).innerHTML=''
  }
</script>

Step 2: If the above is already running then, Copy and put the script below under <BODY> code on your webpage or could also be on the post if you write a post using HTML:

Choose All

<div class="mkbbtndiv" style="position:absolute;"> 
<div class="batangtop">
<table align="left" id="sample1">
<tr valign="top" > 
<td class="mkbsamplebtnbtn"><a href="##" onmouseover="show_text(0,'div0');resetit('div1');resetit('div2');resetit('div3');"> 

On Maskibow</a></td>
<td class="mkbsamplebtnbtn"><a href="##" onmouseover="show_text(1,'div1');resetit('div0');resetit('div2');resetit('div3');"> 

Free Software</a></td>
<td class="mkbsamplebtnbtn"><a href="##" onmouseover="show_text(2,'div2');resetit('div0');resetit('div1');resetit('div3');"> 

Free Games</a></td>
<td class="mkbsamplebtnbtn"><a href="##" onmouseover="show_text(3,'div3');resetit('div0');resetit('div1');resetit('div2');"> 

Tips 'n Trik</a></td>

</tr>
</table>
<br/>
<table border="0" id="sample2">
<tr>
<td><div align="center"><span id="div0"></span><span 
id="div1"></span><span id="div2"></span><span 
id="div3"></span> 
</div>
</td>
</tr>
<tr onmouseover="resetit('div0');resetit('div1');resetit('div2');resetit('div3');"> 


<td colspan="4"> 
</td>
</tr>
</table>
  </div>
  </div>

Label: Button Menu, Tutorial, Tutorial 2, TWeb, TWeb 5

8 stars -10 stars -10 KomentarOver 1,500,000

4 stars-

Original Script By	: Maskibow
Revised Script By	: Maskibow
Script Work In	: Mozilla Firefox, Chrome, Opera

Description :

example :

Point your mouse towards the chart then it will exit the menu list in the drop-down menu

Choose All

<style type="text/css">
a {text-decoration: none;}
/*List Menu Setting*/
.mkbsamplebtn,.mkbsamplebtn a{
  height: 28px;
  width: 120px;
  padding-left: 5px;
  padding-right: 5px;
  padding-top: 2px;
  padding-bottom: 2px;
  color: orange;
  valign: bottom;
  text-align: center;
  font: normal 13px Verdana;
  list-style-type: none;
  text-decoration: none;
  text-shadow: 3px 3px 3px black;
  line-height: 25px;
  border: 2px ridge orange;
  border-radius: 10px 10px 10px;
  -moz-border-radius: 10px 10px 10px;
  -webkit-border-radius: 10px 10px 10px;
  }
.mkbsamplebtn:hover,.mkbsamplebtn a:hover{
  color: black;
  background-color: orange;
  }
/*Button Menu Posisi Setting*/
.mkbbtndiv, #sample1, #sample2{
  width:500;
  list-style-type: none;
  text-decoration: none;
  }
/*Button Menu Setting*/
.mkbsamplebtnbtn,.mkbsamplebtnbtn a{
  padding-top: 2px;
  padding-bottom: 2px;
  height: 25px;
  width: 120px;
  list-style-type: none;
  text-decoration: none;
  text-align: center;
  font: bold 14px Verdana;
  text-shadow: 3px 3px 3px black;
  border: 0px solid;
  -moz-border-radius: 15px;
  -webkit-border-radius: 15px;
  border-radius: 15px;
  }
.mkbsamplebtnbtn:hover,.mkbsamplebtnbtn a:hover{
  color: lime;
  }
/* setting warna border*/
  .batangtop, .menulistmkbbtn, .mkbsamplebtn, .mkbsamplebtn a, .mkbsamplebtn:hover, 
  .mkbsamplebtn a:hover, .mkbsamplebtnbtn, .mkbsamplebtnbtn a{
  border-color: orange;
  }
/* setting warna background*/
  .batangtop, .menulistmkbbtn, .mkbsamplebtn, .mkbsamplebtn a, .mkbsamplebtnbtn, 
  .mkbsamplebtnbtn a{
  background-color: #990099; 
  color: orange;
  }
/* setting Batang atas button*/
  .batangtop{
  width: 100%;
  height: 28px;
  border: 2px solid orange;
  border-color: orange;
  -moz-border-radius: 15px;
  -webkit-border-radius: 15px;
  border-radius: 15px;
  -moz-box-shadow: 4px 4px 4px gray;
  -webkit-box-shadow: 4px 4px 4px gray;
  -goog-ms-box-shadow: 4px 4px 4px gray;
  box-shadow: 4px 4px 4px gray;
  }
</style>
<script language="JavaScript">
  var linktext=new Array (0)
  
  linktext[0]="<div align='left'> <a class='mkbsamplebtn' href='http://www.maskibow.blogspot.com'>Al-Qur'an 
  OnLine</a> <a class='mkbsamplebtn' href='http://www.maskibow.blogspot.com'>Playing 
  Game</a> <a class='mkbsamplebtn' href='http://www.maskibow.blogspot.com'>Watching 
  TV</a> <a class='mkbsamplebtn' href='http://www.maskibow.blogspot.com'>Info 
  Jual-Beli</a> <a class='mkbsamplebtn' href='http://www.maskibow.blogspot.com'>FaceBook</a> 
  </div>"
  linktext[1]="<div align='left'> <a class='mkbsamplebtn' href='http://www.maskibow.blogspot.com/search/label/Antivirus'>Anti 
  Virus</a> <a class='mkbsamplebtn' href='http://www.maskibow.blogspot.com/search/label/Billing'>Billing</a> 
  <a class='mkbsamplebtn' href='http://www.maskibow.blogspot.com/search/label/Design'>Design</a> 
  <a class='mkbsamplebtn' href='http://www.maskibow.blogspot.com/search/label/Tools'>Tools</a> 
  <a class='mkbsamplebtn' href='http://www.maskibow.blogspot.com/search/label/Multimedia'>Multimedia</a> 
  </div>"
  linktext[2]="<div align='left'> <a class='mkbsamplebtn' href='http://www.maskibow.blogspot.com/search/label/Action'>Action</a> 
  <a class='mkbsamplebtn' href='http://www.maskibow.blogspot.com/search/label/RPG'>R 
  P G</a> <a class='mkbsamplebtn' href='http://www.maskibow.blogspot.com/search/label/RTS'>R 
  T S</a> <a class='mkbsamplebtn' href='http://www.maskibow.blogspot.com/search/label/Sport'>Sport</a> 
  </div>"
  linktext[3]="<div align='left'> <a class='mkbsamplebtn' href='http://www.maskibow.blogspot.com/search/label/TWeb'>Tutorial</a> 
  <a class='mkbsamplebtn' href='http://www.maskibow.blogspot.com/search/label/TWeb'>HTML, 
  CSS, Java</a> <a class='mkbsamplebtn' href='http://www.maskibow.blogspot.com/search/label/TWeb'>Blogger</a> 
  <a class='mkbsamplebtn' href='http://www.maskibow.blogspot.com/search/label/Barang'>Info 
  Jual-Beli</a> </div>"
var ns6=document.getElementById&&!document.all
  var ie=document.all
function show_text(thetext, whichdiv){
  if (ie) eval("document.all."+whichdiv).innerHTML=linktext[thetext]
  else if (ns6) document.getElementById(whichdiv).innerHTML=linktext[thetext]
  }
function resetit(whichspan){
  if (ie) eval("document.all."+whichspan).innerHTML=''
  else if (ns6) document.getElementById(whichspan).innerHTML=''
  }
</script>

Step 2: If the above is already running then, Copy and put the script below under <BODY> code on your webpage or could also be on the post if you write a post using HTML:

Choose All

<div class="mkbbtndiv" style="position:absolute;"> 
<div class="batangtop">
<table align="left" id="sample1">
<tr valign="top" > 
<td class="mkbsamplebtnbtn"><a href="##" onmouseover="show_text(0,'div0');resetit('div1');resetit('div2');resetit('div3');"> 

On Maskibow</a></td>
<td class="mkbsamplebtnbtn"><a href="##" onmouseover="show_text(1,'div1');resetit('div0');resetit('div2');resetit('div3');"> 

Free Software</a></td>
<td class="mkbsamplebtnbtn"><a href="##" onmouseover="show_text(2,'div2');resetit('div0');resetit('div1');resetit('div3');"> 

Free Games</a></td>
<td class="mkbsamplebtnbtn"><a href="##" onmouseover="show_text(3,'div3');resetit('div0');resetit('div1');resetit('div2');"> 

Tips 'n Trik</a></td>

</tr>
</table>
<br/>
<table border="0" id="sample2">
<tr>
<td><div align="center"><span id="div0"></span><span 
id="div1"></span><span id="div2"></span><span 
id="div3"></span> 
</div>
</td>
</tr>
<tr onmouseover="resetit('div0');resetit('div1');resetit('div2');resetit('div3');"> 


<td colspan="4"> 
</td>
</tr>
</table>
  </div>
  </div>

Label: Button Menu, Tutorial, Tutorial 2, TWeb, TWeb 5

Maskibow

Folder on Maskibow : How To Create Button Menu Horizontal Menu Horizontal II (CSS On Maskibow)

How To Create Button Menu Horizontal Menu Horizontal II (CSS On Maskibow)

Folder on Maskibow
: How To Create Button Menu Horizontal Menu Horizontal II (CSS On Maskibow)