Horizontal CSS Menu, Keren dan Sederhana. Part 2

Horizontal CSS Menu

Sebelumnya,
Horizontal CSS Menu, Keren dan Sederhana

Cara membuatnya.

1. Login ke Akun blogger

2. Klik Template

3. Klik Edit HTML

4. Klik Proceed

5. Cari taq ]]></b:skin> (gunakan kontrol F untuk memudahkan pencarian)

6. Setelah dapat lalu masukkan kode dibawah ini diatas taq ]]></b:skin>

 

#nav {
float: left;
font: bold 13px Arial, Helvetica, Sans-serif;
-webkit-border-radius: 5px;
-moz-border-radius: 5px;
border-radius: 25px;
overflow: hidden;
}
#nav ul {
margin:0;
padding:0;
list-style:none;
}
#nav ul li {
float:left;
}
#nav ul li a {
float: left;
color:#000;
padding: 10px 15px;
text-decoration:none;
background:#ff9d36;
-webkit-transition: all .6s ease-in;
-moz-transition: all .6s ease-in;
-o-transition: all .6s ease-in;
transition: all .6s ease-in;
-webkit-box-shadow: 1px 1px 1px rgba(0,0,0,0.4);
-moz-box-shadow: 1px 1px 1px rgba(0,0,0,0.4);
box-shadow: 1px px 1px rgba(0,0,0,0.4);
}
#nav ul li a:hover {
color: #fff;
background:#220077;
-webkit-transition: all .6s ease-in;
-moz-transition: all .6s ease-in;
-o-transition: all .6s ease-in;
transition: all .6s ease-in;
}

 

7. Cari taq </head> (gunakan kontrol F untuk memudahkan pencarian)

8. Setelah dapat lalu masukkan kode dibawah ini dibawah taq </head>

 

<div id="nav">
<ul>
<li><a href="#">Home</a></li>
<li><a href="#">About Us</a></li>
<li><a href="#">Contact Us</a></li>
<li><a href="#">Tutorial</a></li>
<li><a href="#">Download</a></li>
<li><a href="#">Feedback</a></li>
</ul>
</div>

 

DEMO

 

Sumber:

http://www.softglad.com