[Boyan]

Hello guys,

I'm coding the navigation for a website, but I come to a problem that I'm not sure how to solve.

For some reason, one of the elements is 'floating' above the others. See how it looks:



Here's the code.

HTML

	<nav>
	<ul>
	<li><a href="#">Home</li>
	<li><a href="#">About</li>
	<li><a href="#">Foo</li>
	<li><a href="#">Contact</li>
	
	</ul>
	</nav>

CSS

nav{
	position:absolute;
	width:600px;
	height:40px;
	top:47px;
	right:-140px;

}


nav ul li{
	float: left;
	line-height:normal;
	margin-left:15px;
}

nav ul li a{
	font-size: 20px;
    font-family:"Trebuchet MS", Arial, Helvetica, sans-serif;
	color:#0099ff;
	text-transform:capitalize;
	font-weight:normal;
	display:block;	
	background-color:transparent;
    text-decoration:none;
	margin-top:3px;
	padding:5px;

	}

Any help is appreciated.

Thanks.

[Atli]

Hey.

This is happening because none of your <a> tags are closed properly.

<!-- This is invalid -->
<li><a href="#">Link</li>

<!-- It should be -->
<li><a href="#">Link</a></li>

[Boyan]

Solved. Thank you.

[Finney_3]

If I may add only 1 word of advise while coding which has been my biggest mistake which was closing everything that I open. I would say tried to build a good habbit of anything you open that you close. I spent about 2 hours being stumped by an issue like this before with my navigation because I failed to close the same tags....
Glad to see the issue is solve.

Plus 1 for ATli