Html li之间的导航栏空间

在第一个列表项和第二个列表项之间似乎有一个小空间。我怎样才能删除它？其余列表项之间没有间距。你知道我该怎么去掉这个间距吗？因为它让我看起来很糟糕

.media {
    width: 140px;
    height: 140px;
    font-size: 16px;
    font-family: Tahoma, Geneva, sans-serif;
    font-weight: bold;
    text-align: left;
    text-shadow: 3px 2px 3px #333333;
}

.media a {
    text-decoration: none;
    color: white;
    padding: 10px;
}

.media ul {
    height: auto;
    padding: 8px 0px;
    margin: 0px;
}

.media li:hover {
    background-color: #CCCCCC;

}

.media li {
    width: 150px;
    text-align: center;
    height: 50px;
    background-color: grey;
}

这是分区：

<div class="media">
    <ul>
        <li><a href="index.html">Home</a></li>
        <ul><li><a href="aboutus.html">About Us</a></li>
        <li><a href="services.html">Services</a></li>
        <li><a href="contactus.html">Contact Us</a></li>
    </ul>
</div>

删除第二项之前的附加

。
这是因为它们之间有一个

ul

.media{
宽度：140px；
高度：140像素；
字体大小：16px；
字体系列：塔荷马，日内瓦，无衬线；
字体大小：粗体；
文本对齐：左对齐；
文本阴影：3px 2px 3px#333333；
}
a.媒体a{
文字装饰：无；
颜色：白色；
填充：10px；
}
.media ul{
高度：自动；
填充：8px 0px；
边际：0px；
}
.李媒体：悬停{
背景色：#中交；
}
李媒体{
宽度：150px；
文本对齐：居中；
高度：50px；
背景颜色：灰色；
}

您需要从li之间移除ul
您的HTML在其中一个
开头包含一个零散的
只需将其移除即可

<div class="media">
    <ul>
        <li><a href="index.html">Home</a></li>
        <li><a href="aboutus.html">About Us</a></li>
        <li><a href="services.html">Services</a></li>
        <li><a href="contactus.html">Contact Us</a></li>
    </ul>
</div>

只需添加一个css
.media>ul>ul{ 填充顶部：0； }

.media{
宽度：140px；
高度：140像素；
字体大小：16px；
字体系列：塔荷马，日内瓦，无衬线；
字体大小：粗体；
文本对齐：左对齐；
文本阴影：3px 2px 3px#333333；
}
a.媒体a{
文字装饰：无；
颜色：白色；
填充：10px；
}
.media ul{
高度：自动；
填充：8px 0px；
边际：0px；
}
.李媒体：悬停{
背景色：#中交；
}
李媒体{
宽度：150px；
文本对齐：居中；
高度：50px；
背景颜色：灰色；
}
.media>ul>ul{
填充顶部：0；
}

有两种方法可以做到这一点。
您可以从索引链接中删除 或 在css代码中使用“margin”，如{margin:-5px；}