Navigation ala Google

Heyho Epvpers User,
nach langer absinens seitens CSS und HTML wollte ich mich mal wieder mit dieser Materie befassen und scheitere schon bei ein so einfachen Aufgabe

Code:

body
{
	background-color:#f7f7f7;
	margin: 0; 
	  padding: 0;
	
	
}

.boxtop

{
left: 0px;
margin: 0 auto;
font-family: 'Chau Philomene One', sans-serif;
width: 100%;
height:30px;
background-color: #2d2d2d;

	
	
	
	
	
}


#navlist li
{
left: 0px;
margin: 0 auto;

display: inline;
list-style-type: none;
padding-right: 20px;
font-family: 'Chau Philomene One', sans-serif;

}
a:link { font-family: 'Chau Philomene One', sans-serif; color: #bbbbbb; text-decoration:none; }
a:visited { font-family: 'Chau Philomene One', sans-serif; color: #bbbbbb; text-decoration:none; }
a:focus { font-family: 'Chau Philomene One', sans-serif; color: #bbbbbb; text-decoration:none; }
a:hover { font-family: 'Chau Philomene One', sans-serif; color: #bbbbbb; text-decoration:none; }
a:active { font-family: 'Chau Philomene One', sans-serif; color: #bbbbbb; text-decoration:none; }

Ich m�chte eine Naviagtion wie z.B auf Google.de oder Pvp.Net ( LoL ) erstellen.
Problem ist, das jetzt das Men� nicht mehr oben direkt oben anliegt sondern etwas abstand da ist.

HTML

Code:

<body>
<div id="" class="boxtop">
<ul id="navlist" >
   <li> <a class="link" href="#"> Your Community</a> </li>
   <li> <a class="link" href="#"> �ber Uns</a> </li>
   <li> <a class="link" href="#"> Werbung</a> </li>
   <li> <a class="link" href="#"> Impressum</a> </li>
    <li> <a class="link" href="#"> Nutzungsbedingungen</a> </li>

</ul>


</div>
</body>

Navigation ala Google - Problem