CSS Nav Bar is wrong

[aaronoafc]

Hi,

Coding a mockup website, working on a simple horizontal css bar. Was following a tutorial as a rough guideline but it doesn't look anywhere near the same!

I have attached 2 images, one is how it is supposed to be and one is how it looks. Please see css code below:

/* Navigation Bar */
#nav {
	width:100%;
	float:left;
	margin:0 0 3em 0;
	padding:0;
	list-style:none;
	background-color:#f2f2f2;
	border-bottom:1px solid #ccc;
	border-top:1px solid #ccc;
}
#nav li {
	float:left;
}
#nav li a {
	display:block;
	padding:8px 15px;
	text-decoration:none;
	font-weight:bold;
	color:#069
	border-right: 1px solid #css;
}
#nav li a:hover {
	color:#c00;
	background-color:#fff
}

Thanks guys

[Cole001]

i am not sure.. but you can do one thing....

do fixed position on the page & try

.class {
position: fixed
/* Any positioning that you want to do using top: ; bottom: ; etc.*/
}

[sunfighter]

@ Cole001, stay away from position: fixed/absolute/relative and use the natural flow of things unless absolutely necessary. And it isn't in a simple horizontal css menu.

@aaronoafc I really think you stopped midway through the example because some easy stuff is missing. Like

#nav li {
	float:left;
	list-style: none;
	padding: 5px;
	border-left: 1px solid #ccc;
}

for starters. Go back and redo the tutorial.