<html xmlns="http://www.w3.org/1999/xhtml" xml:lang="en" lang="en">

<!--Bab5-1.html-->

<head>

<meta http-equiv="Content-Type" content="text/html; charset=UTF-8" />

<title>Membuat Navigasi Bar dari Daftar</title>

<style type="text/css">

#nav {

 margin:0;

 padding:0;

 background:#808259 url(nav_bg.jpg) 0 0 repeat-x;

 float:left;

 border:1px solid #42432d;

 border-width:1px 0

}

#nav li {

 padding:0;

 margin:0;

 display:inline;

}

#nav a:link,

#nav a:visited {

 color:#000;

 background:#b2b580;

 padding:5px 20px 4px 10px;

 float:left;

 width:auto;

 border-right:1px solid #42432d;

 text-decoration:none;

 font:bold 1em/1em Arial, Helvetica, sans-serif;

 text-transform:uppercase;

}


#nav li:first-child a {

 border-left:1px solid #42432d;

}


#nav a:hover,

#nav a:focus {

 color:#fff;

 background:#727454;

}


#home #nav-home a,

#about #nav-about a,

#archive #nav-archive a,

#lab #nav-lab a,

#reviews #nav-reviews a,

#contact #nav-contact a {

background:#e35a00;

 color:#fff;

 text-shadow:none;

}


#home #nav-home a:hover,

#about #nav-about a:hover,

#archive #nav-archive a:hover,

#lab #nav-lab a:hover,

#reviews #nav-reviews a:hover,

#contact #nav-contact a:hover {

 background:#e35a00;

}

#nav a:active {

 background:#e35a00;

 color:#fff;

}

</style>

</head>

<body>

<ul id="nav">

<li id="nav-home"><a href="#">Home</a></li>

<li id="nav-about"><a href="#">About</a></li>

<li id="nav-archive"><a href="#">Archive</a></li>

<li id="nav-lab"><a href="#">Lab</a></li>

<li id="nav-reviews"><a href="#">Reviews</a></li>

<li id="nav-contact"><a href="#">Contact</a></li>

</ul>

</body>

</html>