Cara Membuat Css Horisontal menu yang sexy

Tutorial yang singkat dan mudah untuk membuat Css menu horisontal pada blog. Caranya :
1.Log in ke account blog kita --> layout- -> Edit HTML
2.Cari kode </head> tag .
3.Copy dan paste kode berikut sebelum kode </head> tag.

<style type='text/css'>
#foxmenucontainer{
height:29px;
background:url(https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEilHATG3tjXXAjsZGk4lRlXMCp25NVTrtkSlpvusHcoBHxY0R3eZyMKBnPzB7Kg32TEYjxqWFCXu1xGdSqZBFyYnn3Tnzw_PoK_Hx7l9WtRl90VWg57kXEMtIpKiZpojhKAZpvz5L7lRk1O/) repeat-x;
display:block;
padding:0px 0 0px 0px;
border-top:1px solid #474747;
font: 14px &quot;Century gothic&quot;,verdana, Arial, sans-serif;
font-weight:normal;
}

#menu ,#menu ul {
margin: 0px 5px;
padding: 0px;
list-style: none;
height:29px;
}

#menu a {
color: #B3DBEF;
display: block;
 font-weight: normal;
 padding: 4px 10px 6px 10px;
}

#menu a:hover {
background:url(https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEi0w2svquf_ijYdZk3mf8RIS9h5X6qb45pwS_3eZB2bs02qk7wxpKXqRt51da47hm5Sso-wg47Cg5pIX6Q-A0389vjw1D_RnUQTG4QlJBgKmUJcnl0fPyzqBojo39uWwMc2Z7jxQvFkF6AR/) repeat-x;
color: #fff;
display: block;
text-decoration: none;
}

#menu li {
float: left;
margin: 0px 0 0px 0;
padding: 0px;
}

#menu li li {
float: left;
margin: px 0px 0px 5px;
padding: 0px;
width: 130px;
}

#menu li li a, #menu li li a:link, #menu li li a:visited {
background:url(https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEilHATG3tjXXAjsZGk4lRlXMCp25NVTrtkSlpvusHcoBHxY0R3eZyMKBnPzB7Kg32TEYjxqWFCXu1xGdSqZBFyYnn3Tnzw_PoK_Hx7l9WtRl90VWg57kXEMtIpKiZpojhKAZpvz5L7lRk1O/) repeat-x;
width: 150px;
float: none;
margin: 0px;
padding: 4px 10px 5px 10px;
color:#fff;
}

#menu li li a:hover, #menu li li a:active {
background:url(https://blogger.googleusercontent.com/img/b/R29vZ2xl/AVvXsEi0w2svquf_ijYdZk3mf8RIS9h5X6qb45pwS_3eZB2bs02qk7wxpKXqRt51da47hm5Sso-wg47Cg5pIX6Q-A0389vjw1D_RnUQTG4QlJBgKmUJcnl0fPyzqBojo39uWwMc2Z7jxQvFkF6AR/) repeat-x;
width: 150px;
float: none;
margin: 0px;
padding: 4px 10px 5px 10px;
color:#06415F;
}

#menu li ul {
position: absolute;
width: 10em;
left: -999em;
z-index:1;
}

#menu li:hover ul {
left: auto;
display: block;
}

#menu li:hover ul, #menu li.sfhover ul {
left: auto;
}
</style>

Note: Please host menu.jpg and menuhov.jpg images yourself. ( apa artinya ini ha yo...)
4.Klik Simpan template.
5.Klik Layout-->Page Elements dan klick "Add a gadget".
6.Pilih "html/java script" dan coppy paste kode di bawah ini lalu klik simpan.

<div id="foxmenucontainer">
<div id="menu">

<ul>
<li><a expr:href="data:blog.homepageUrl">Home</a></li>

<li><a href="#" title="#">About</a></li>

<li><a href="#" title="#">WebDesign</a>
<ul>
<li><a href="#" title="#">HTML</a></li>
<li><a href="#" title="#">CSS</a></li>
<li><a href="#" title="#">JavaScript</a></li>
</ul>
</li>

<li><a href="#" title="#">Subscribe</a></li>

<li><a href="#" title="#">Register</a></li>

<li><a href="#" title="#">Contact</a></li>

</ul>
</div> 
</div>

Selesai dan lihat contoh hasilnya di bawah ini :

Anda Sudah Baca Yang Ini? :