Membuat Menu Horizontal CSS

Alhmdulillah, Saya diberi kesempatan untuk posting tutorial lagi🙂.

Pada tutorial kali ini, saya akan membahas bagaimana membuat Horizontal Menu dengan menggunakan CSS.Horizontal menu atau sering disebut Navigation Menu merupakan hal yang mutlak diperlukan sebuah website.

Oke, langsung saja pembuatannya😀

Buat file html berikut

<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>

Dan buat file css nya. Simpan dengan nama style.css

 #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;
 }

Hasilnya :

Selamat Mencoba, 🙂

6 thoughts on “Membuat Menu Horizontal CSS

Leave a Reply

Fill in your details below or click an icon to log in:

WordPress.com Logo

You are commenting using your WordPress.com account. Log Out / Change )

Twitter picture

You are commenting using your Twitter account. Log Out / Change )

Facebook photo

You are commenting using your Facebook account. Log Out / Change )

Google+ photo

You are commenting using your Google+ account. Log Out / Change )

Connecting to %s