Pada tutorial kali ini, saya akan berbagi tentang bagaimana Cara Membuat Horizontal Menu Dengan CSS.. Horizontal menu atau sering disebut Navigation Menu merupakan hal yang mutlak diperlukan sebuah blog / website.
Oke, langsung saja pembuatannya :
<html>
<head>
<title>Horizontal Menu Navigation</title>
<link href="style.css" rel="stylesheet" type="text/css" />
</head>
<body>
<div id="nav">
<ul>
<li><a href="#">Home</a></li>
<li><a href="#">About</a></li>
<li><a href="#">Portfolio</a></li>
<li><a href="#">Contact</a></li>
</ul>
</div>
</body>
</html>
Simpan Kode CSS dibawah ini di atas ]]></b:skin>
#nav ul{
margin:0;
padding:0;
list-style:none;
width:100%;
float:left;
background:#FF6600;
}
#nav li{
display:inline;
}
#nav li a{
display:block;
float:left;
padding:5px 12px;
text-decoration:none;
color:#FFFFFF;
font:12px Arial, Helvetica, sans-serif;
border-right:1px solid #FF9900;
}
#nav li a:hover{
background:#FF9900;}
Demikian yang dapat saya bagikan semoga bermanfaat ...! Dan sampai jumpa di artikel berikut nya .