i have a staircase effect i cant figure to resolve
HTML:
<html>
<head>
<title>Cicilia The Blondie</title>
<meta http-equiv="Content-Type" content="text/html; charset=iso-8859-1">
<link rel="stylesheet" type="text/css" href="style.css" />
</head>
<body>
<ul id="nav">
<li><a href="#">Home</a></li>
<li><a href="#">About me</a></li>
<li><a href="#">Contact me</a></li>
<li><a href="#">Reservation</a></li>
<li><a href="#">Calendar</a></li>
<li><a href="#">Photos</a></li>
<li><a href="#">Members</a></li>
</ul>
</body>
</html>
CSS:
{
margin: 0;
padding: 0;
}
body {
font-size: 62.5%;
font-family: Bickham Script Pro, Chaparral Pro, Times New Roman;
background: url(images/body-bg.jpg) repeat-y;
}
ul#nav {
height: 186px; width: 976;
margin-left: 134px;
background: url(images/header-bg.jpg) no-repeat;
}
ul#nav li a {
display: inline;
width: 130px;
float: left;
margin-top: 150px;
}