Kumpulan kodeMenu Blogspot HorisontalDanVertikal

Kode Menu Horisontal dengan berbagai warna :

1. BLACK GREEN

CSS kode :

<style type="text/css">
.agoesmenus{ width: 100%; font-family: Arial, Helvetica, sans-serif; font-size: 12px; font-weight: bold; font-style: normal; text-decoration: none;}
.agoesmenus ul{ margin: 0; padding: 0; float: left; width: 100%; background: #000000; border-top-width: 1px; border-right-width: 0; border-bottom-width: 1px; border-left-width: 0; border-top-style: solid; border-right-style: solid; border-bottom-style: solid; border-left-style: solid; border-top-color: #000000; border-right-color: #000000; border-bottom-color: #000000; border-left-color: #000000}
.agoesmenus ul li{display: inline;}
.agoesmenus ul li a{ float: left; color: #FFFFFF; padding: 5px 11px; text-decoration: none; border-right-width: 1px; border-right-style: solid; border-right-color: #000000;}
.agoesmenus ul li a:visited{color: #FFFFFF;}
.agoesmenus ul li a:hover, .agoesmenus ul li .selected{ color: #FFFF00 !important; padding-top: 5px; padding-bottom: 5px; background: #008000;}
</style>

Kode HTML :

<div class="agoesmenus">
<ul>
<li><a href="blogsobat" class="selected">Home</a></li>
<li><a href="blogsobat">About</a></li>
<li><a href="blogsobat">Contact</a></li>
<li><a href="blogsobat">Product</a></li>
<li><a href="blogsobat">Help</a></li>
</ul>
</div>

2. ABU-ABU 

 Kode CSS :

<style type="text/css">
.agoesmenus{
width: 100%;
font-family: Arial, Helvetica, sans-serif;
font-size: 12px;
font-weight: bold;
font-style: normal;
text-decoration: none;
}
.agoesmenus ul{
margin: 0;
padding: 0;
float: left;
width: 100%;
background: #808080;
border-top-width: 1px;
border-right-width: 0;
border-bottom-width: 1px;
border-left-width: 0;
border-top-style: solid;
border-right-style: solid;
border-bottom-style: solid;
border-left-style: solid;
border-top-color: #FFFFFF;
border-right-color: #FFFFFF;
border-bottom-color: #FFFFFF;
border-left-color: #FFFFFF
}
.agoesmenus ul li{
display: inline;
}
.agoesmenus ul li a{
float: left;
color: #FFFFFF;
padding: 5px 11px;
text-decoration: none;
border-right-width: 1px;
border-right-style: solid;
border-right-color: #FFFFFF;
}
.agoesmenus ul li a:visited{
color: #FFFFFF;
}
.agoesmenus ul li a:hover, .agoesmenus ul li .selected{
color: #FFFF00 !important;
padding-top: 5px;
padding-bottom: 5px;
background: #C0C0C0;
}
</style>

Kode HTML :

<div class="agoesmenus"><ul><li><a href="blogsobat" class="selected">Home</a></li><li><a href="blogsobat">About</a></li><li><a href="blogsobat">Contact</a></li><li><a href="blogsobat">Product</a></li><li><a href="blogsobat">Help</a></li></ul>

3. Hijau