css - 无法让我的导航正常工作

Question

大家好，我是网页设计的新手，但无法让我的导航在顶部对齐或从 li 中删除元素符号。我已经解决了，但它开始干扰页面的其余部分，所以我对其进行了一些修改，但现在无法正常工作。任何帮助将不胜感激!

.menuitem {
    list-style-type: none;
    text-align: center;
    color: #fff;
    text-decoration: none;
    width: 240px;
}

#navigation {
    width: 1000px;
    background-color: #0b61a4;
    font-size: 18pt;
}

nav a:visited{
    text-decoration: none;
    width: 240px;
    float: left;
    margin-left: -20px;
    margin-bottom: -6px;
}

nav a:hover {
    color: #CED9D9;
    text-decoration: none;
    width: 240px;
    float: left;
    margin-left: -20px;
    margin-bottom: -6px;
}

nav a:link{
    text-decoration: none;
    width: 240px;
    float: left;
    margin-left: -20px;
    margin-bottom: -6px;
}

nav a:active {
    text-decoration: none;
    width: 240px;
    float: left;
    margin-left: -20px;
    margin-bottom: -6px;
}

HTML

<div id="navigation">
  <ul>                 
    <li><a href="index.html" class="menuitem">Home</a></li>                 
    <li><a href="pharmacy_solutions" class="menuitem">Pharmacy Solutions</a></li>                 
    <li><a href="about_us.html" class="menuitem">About Us</a></li>                 
    <li><a href="contact_us.html" class="menuitem">Contact Us</a></li>             
  </ul>         
</div>

Answer 1

这样的事情怎么样？ http://jsfiddle.net/ACQ27/2/

#navigation {
    width: 1040px;
    background-color: #0b61a4;
    font-size: 18pt;
}

#navigation ul{
    list-style-type: none;
    text-align: center;
    color: #fff;
     display:inline-block;
}
#navigation ul li {
     display:inline-block;
     width: 240px;
    margin-bottom: -6px;
}

#navigation ul li a {
    color: #fff;
    text-decoration: none;
}

#navigation ul li a:hover {
    color: #CED9D9;

}