» » Navigasi CSS Horizontal hover menu

Navigasi CSS Horizontal hover menu

Wednesday, September 9, 2009 | Posted by Admin

Hi sobat saya datang kembali membawa tip Navigation buat anda.Contoh sepeerti ini

1-Log in ke account blogger anda.
2-Click Layout--->
3-Click Edit HTML
4-Letakkan kode dibawah ini sebelum ]]></b:skin> tag :
.hovermenu ul{
font: bold 13px arial;
padding-left: 0;
margin-left: 0;
height: 20px;
}

.hovermenu ul li{
list-style: none;
display: inline;
}

.hovermenu ul li a{
padding: 2px 0.5em;
text-decoration: none;
float: left;
color: black;
background-color: #FFF2BF;
border: 2px solid #FFF2BF;
}

.hovermenu ul li a:hover{
background-color: #FFE271;
border-style: outset;
}

html>body .hovermenu ul li a:active{ /* Apply mousedown effect only to NON IE browsers */
border-style: inset;
}
5-Letakkan kode dibawah ini pada HTML anda
<div class='hovermenu'>
<ul>
<li><a href='http://www.mutiaramail.blogspot.com'>Mutiaramail</a></li>
<li><a href='#http://Edit Link'>Edit Link</a></li>
<li><a href='#http://Edit Link'>Edit Link</a></li>
<li><a href='#http://Edit Link'>Edit Link</a></li>
<li><a href='#http://Edit Link'>Edit Link</a></li>
</ul>
</div>
6-Simpan dan selesai

Related With:

Tips
Trick

Labels: , ,  

0 comments:

Post a Comment

Subscribe to: Post Comments (Atom)