Dalam Postingan ini nisan akan mencoba share kembali tutorial sederhana, membuat simple Horizontal Menu di CSS.
Langsung saja, pertama tulis kode HTML berikut :
<div id="menu_wrapper">
<ul id="menu">
<li class="visited"><a href="hor_menu.html" title="Home" > Home </a> </li>
<li><a href="#" > About </a> </li>
<li><a href="#" > Product </a> </li>
<li><a href="#" > Service </a> </li>
<li><a href="#" > Contact </a> </li>
</ul>
</div>
dan berikut kode CSS nya :
body{
padding : 50px;
background:#fff;
}
#menu{
width:1024px;
margin: 50px auto;
font-family:Arial, Sans-serif;
padding:0;
height:40px;
background:#3498DB;
font-weight:bold;
list-style:none;
border-top:2px solid #3498DB;
border-bottom: 2px solid #34495E;
}
#menu li {
float:left;
margin:0;
margin-left:15px;
}
#menu li a {
text-decoration:none;
width:75px;
line-height:40px;
color:#666;
display:block;
text-align:center;
}
#menu_wrapper li a{
color: #ECF0F1;
}
#menu_wrapper li a:hover, #menu_wrapper li.visited a{
color:#F39C12;
background:#2980B9;
border-bottom:2px solid #3498DB;
}
Sekian dari Nisan, semoga bermanfaat :D