Pertama buka notepad anda
copy script di bawah :
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html xmlns="http://www.w3.org/1999/xhtml">
<head>
<title>2</title>
<meta http-equiv="Content-Type" content="text/html; charset=iso-8859-1" />
<link rel="stylesheet" href="styles.css" type="text/css" />
</head>
<body>
<h1>Horizontal CSS Navigation Menu</h1>
<hr />
<div id="tabs">
<ul>
<li><a href=""><span>CSS Templates</span></a></li>
<li><a href=""><span>CSS Layouts</span></a></li>
<li><a href=""><span>CSS Books</span></a></li>
<li><a href=""><span>CSS Menus</span></a></li>
<li><a href=""><span>CSS Tutorials</span></a></li>
<li><a href=""><span>CSS Reference</span></a></li>
</ul>
</div>
</body>
</html>
simpan dengan file.index.php
kedan copy script css ini
body {
font: bold 11px/1.5em Verdana;
}
h1 {
font-family:Verdana, Arial, Helvetica, sans-serif;
font-size:16px;
font-weight:bold;
margin:0;
padding:0;
}
hr {
border:none;
border-top:1px solid #CCCCCC;
height:1px;
margin-bottom:25px;
}
#tabs {
float:left;
width:100%;
font-size:93%;
line-height:normal;
border-bottom:1px solid #84776B;
}
#tabs ul {
margin:0;
padding:10px 10px 0 50px;
list-style:none;
}
#tabs li {
display:inline;
margin:0;
padding:0;
}
#tabs a {
float:left;
background:url("tableft.gif") no-repeat left top;
margin:0;
padding:0 0 0 4px;
text-decoration:none;
}
#tabs a span {
float:left;
display:block;
background:url("tabright.gif") no-repeat right top;
padding:5px 15px 4px 6px;
color:#84776B;
}
#tabs a span {float:none;}
#tabs a:hover span {
color:#74675B;
}
#tabs a:hover {
background-position:0% -42px;
}
#tabs a:hover span {
background-position:100% -42px;
}
simpan dengan file style.css