导航栏问题

Question

所以这是我的问题，我希望有一个固定在浏览器顶部的导航栏，并使导航项纯文本并正确居中。我的问题是我似乎无法让css正确。这是我的HTML。我有一个重复的图像，我试图使用字体的影响。我也想尝试悬停文本。

<div id="top_nav">    

<ul>

<li><a href="#"><span>Home</span></a><li>
<li><a href="#"><span>Services</span></a></li>
<li><a href="#"><span>About</span></a></li>
<li><a href="#"><span>Skills</span></a></li>
<li><a href="#"><span>Portfolio</span></a></li>
<li><a href="#"><span>Contact</span></a></li>
<li><a href="#"><span>Blog</span></a></li>                    
                </ul>
</div>




#top_nav { 
background:#343642;
font-family: Impact, Charcoal, sans-serif;
}

#top_nav ul {
margin:0; 
padding:11px 0; 
list-style:none; 
width:990px; 
overflow:hidden;
}

#top_nav ul li {
margin:0 56px 0 0; 
padding:0; 
font-size:1.7em; 
text-transform:uppercase; 
float:left; 
font-weight:bold;
}

#top_nav ul li.last {
margin-right:0;
}

#top_nav ul li a {
color:#fef6e9; 
text-decoration:none;
}

#top_nav ul li a:hover {
color:#ed7163; 
text-decoration:none;
}