html - 无序列表需要 CSS 帮助

Question

我正在尝试使用无序列表创建一个基本的导航栏，但由于某种原因我无法让元素符号消失。

我已经在 Google 上搜索了一个解决方案，在我看来它应该可以工作，但我认为我可能搞砸了一些与 ul 的风格无关的东西，这反过来又阻止了 ul应用样式。

这里是相关的html:

<div id="nav">
    <ul>
        <li><a href="index.html">Home</a></li>
        <li><a href="about.html">About Us</a></li>
        <li><a href="example.html">Examples</a></li>
        <li><a href="contact.html">Contact Us</a></li>
    </ul>
</div>

这是 CSS:

#nav ul
{
    list-style-type: none;
    position: absolute;
    top: 10px;
    right: 0;
    margin: 0;
    padding: 0;
}
#nav ul li
{
    float: left;
}
#nav ul li a
{
    display: inline;
    float: left;
    padding: 8px 5px 3px 5px;
    margin-right: 5px;
    background-color: #034a7f;
    color: #fff;
    font-weight: bold;
    text-decoration: none;
}
#nav ul li a:hover
{
    padding-top: 12px;
    background-color: #075a97;
}

Answer 1

只是为了确定，我通常也将它应用于 li:

#nav ul li
{
    list-style-type: none;
    float: left;
}

其他要检查的是使用类似 firebug 的工具对于 firefox 并右键单击列表项并执行“检查元素”。从那里您可以看到实际应用于它的样式以及它们的来源、哪些样式覆盖了哪些样式等。

更有可能的是，正在发生的事情(与其他答案和评论一起)是你有一些其他的风格让元素符号出现——这就是 Firebug 将真正帮助你的地方.