奇怪的CSS/Nav空格

你好，我们又见面了。我用CSS创建了这个两级导航栏，我做了所有的工作，但有一个小问题，我似乎无法摆脱一个空白

这是Html

<ul id="nav-top">
        <li><a href="default.asp">Home</a></li>
        <li><a href="news.asp">News</a></li>
        <li><a href="contact.asp">Contact</a></li>
        <li><a href="about.asp">Join TGA</a></li>
    </ul>

    <img src="wp-content/themes/tga/pictures/topbanner.jpg" id="top-banner" />
    <div id="header">
    <ul id="nav-bottom">
            <li><a href="#">Percoidei</a>
        <ul>
            <li><a href="#">Remoras</a></li>
            <li><a href="#">Tilefishes</a></li>
            <li><a href="#">Bluefishes</a></li>
            <li><a href="#">Tigerfishes</a></li>
        </ul>
    </li>

    <li><a href="#">Anabantoidei</a>
        <ul>
            <li><a href="#">Climbing perches</a></li>
            <li><a href="#">Labyrinthfishes</a></li>
            <li><a href="#">Kissing gouramis</a></li>
            <li><a href="#">Pike-heads</a></li>
            <li><a href="#">Giant gouramis</a></li>
        </ul>
    </li>

这是它的样子

查看下面的链接很抱歉没有代表点来上传图片

我做错了什么导致了空白

这是我说的空白。

我把它上传到JSfdel-Crey DeV站点，它在那里工作很好，你认为我的浏览器Chrome 140.835.163在Mac上运行是个问题吗？它在Firefox中也是空白的吗？

---

我想你是说缩进子菜单的空格？ 在这种情况下，很可能是因为您正在子菜单中启动一个新的，它总是缩进的。放一些px负片或空白？对于导航底部ul，你应该是好的！e、 g

#nav-bottom ul { padding-left: -15px; }

---

托马斯，你能指出你认为哪个空间是空白的吗？很多空间可能被认为是空白的：您还应该尝试在Firefox中使用Firebug，或者在Chrome和Safari中内置web inspector。您可以查看每个元素的计算样式，并希望了解空间的来源。有点离题，但我会在鼠标滚动时更改菜单上的文本颜色。深灰色的黑色看起来不太好；谢谢但我尝试了你的理论，要么用左边空白，要么用左边空白，要么什么都没做，要么就是这样做了，我认为我们的方法是正确的。尝试nav bottom li ul li a{padding left:-15px；}或为子菜单链接或列表点指定一个单独的class/id，并为它们指定负的padding/margin。我个人更喜欢后者，只是为了让整个css代码更干净一点。

#nav-bottom ul { padding-left: -15px; }