Html 下拉菜单子项之间的间隙

我曾试图在其他线程中找到我的问题的解决方案，但是，没有一个真正解决我的特定问题，至少在这样一个业余水平上。我真的很感谢你的帮助

我的下拉菜单显示下拉项及其子元素之间的间隙时出现问题

问题是针对以下菜单项：餐厅。将鼠标悬停在顶级餐厅选项卡上后，其中一个项目的子菜单将立即显示，并且显示的子菜单之间存在巨大的间隙

我的CSS和HTML：

正文{
字体系列：verdana，无衬线；
字体大小：100%；
}
#网站包装器{
背景颜色：黄色；
宽度：65%；
保证金：0自动；
}
页脚{
字体大小：小；
颜色：白色；
背景颜色：灰色；
}
旁白{
背景颜色：绿色；
边框样式：实心；
}
文章{
边框样式：实心；
背景颜色：绿色；
}
第{}节
/*桌子*/
桌子
th，
运输署{
边框：1px纯黑；
文本对齐：居中；
}
/*桌尾*/
/*标题*/
h1{
文本对齐：居中；
字体大小：250%；
}
氢{
文本对齐：居中；
字号：175%；
}
h3{
文本对齐：居中；
字体大小：125%；
}
/*标题末尾*/
/*整体菜单区*/
.导航{
背景颜色：粉红色；
文本对齐：居中；
}
/*导航中的无序列表*/
美国海军{
列表样式类型：无；
填充：0；
保证金：0；
}
/*nav中具有列表元素（链接）的无序列表*/
李国荣先生{
显示：内联块；
}
/*顶部菜单链接的悬停属性*/
.nav ul li:悬停{
背景颜色：黄色；
}
/*正常链接属性*/
李丽娜先生，
拜访{
颜色：紫色；
填充：20px 10px 20px 10px；
显示：块；
文字装饰：无；
}
/*悬停链接被阻止*/
.导航ul li:悬停ul{
显示：块；
}
/*下拉菜单属性*/
美国海军{
位置：绝对位置；
文本对齐：左对齐；
显示：无；
背景色：红色；
}
/*下拉列表是块*/
李国荣先生{
显示：块；
}
/*超链接的填充属性*/
.nav ul li a，
拜访{
填充：15px 10px 15px 10px；
}
/*下拉悬停颜色*/
.导航ul li:悬停{
背景颜色：黄色；
}
.nav ul{
最小宽度：175px；
背景色：#ADC9F0；
利润率：-48px 0 160px；
}
/*    */
.imageBanner{
边框样式：实心；
背景颜色：橙色；
高度：200px；
溢出：隐藏；
背景图片：url（porsche.gif）；
背景重复：无重复；
背景尺寸：封面；
}
.imageBanner h2{
颜色：#624791；
文本对齐：左对齐；
}
.imageBanner img{
宽度：100%；
}
/*下面的所有代码仅控制网站上的表单元素*/
传奇{
字体大小：20px；
}
形式{
背景：-webkit线性梯度（底部，#CCCC，#EEEEEE 175px）；
背景：-moz线性梯度（底部，#CCCCCC，#EEEEEE 175px）；
背景：线性梯度（底部，#CCCCCC，#EEEEEE 175px）；
保证金：自动；
位置：相对位置；
宽度：550px；
高度：700px；
字体系列：塔荷马，日内瓦，无衬线；
字体大小：14px；
字体：斜体；
线高：24px；
字体大小：粗体；
颜色：#09C；
文字装饰：无；
边界半径：10px；
填充：10px；
边框：1px实心#999；
边框：插入1px实心#333；
-webkit盒阴影：0px 0px 8px rgba（0,0,0,0.3）；
-moz盒阴影：0px 0px 8px rgba（0,0,0,0.3）；
盒子阴影：0px 0px 8px rgba（0,0,0,0.3）；
}
输入{
宽度：375px；
显示：块；
边框：1px实心#999；
高度：25px；
-webkit盒阴影：0px 0px 8px rgba（0,0,0,0.3）；
-moz盒阴影：0px 0px 8px rgba（0,0,0,0.3）；
盒子阴影：0px 0px 8px rgba（0,0,0,0.3）；
}
文本区{
宽度：500px；
高度：200px；
}

普遍的
身体{
背景图片：url（128-174.jpg）；
背景重复：重复；
}



























文章
&抄袭；比利2015。免责声明：本网站上的所有表达都是严格的个人意见和偏好，可能并不真实反映地点、业务等。

您的代码有点乱，有很多未关闭的列表项和列表。也就是说，您可以使用

position:relative和
位置：绝对

有关我的解决方案，请参阅

清理导航：

<div class="nav">
  <ul>
    <li><a href="#">Index</a></li>
    <li><a href="#">Parks</a>
      <ul>
        <li><a href="disneyland.html">Disney Land</a></li>
        <li><a href="universal.html">Universal</a></li>
        <li><a href="buschgardens.html">Busch Gardens</a></li>
      </ul>
    </li>
    <li><a href="#">Restaurants</a>
      <ul>
        <li><a href="logans.html">Logans</a></li>
        <li><a href="outback.html">Outback</a>
          <ul>
            <li><a href="#">Test Restaurant</a></li>
          </ul>
        </li>
        <li><a href="perkins.html">Perkins</a>
      </ul>
    </li>
    <li><a href="statistics.html">Statistics</a></li>
  </ul>
</div>

您的代码有点乱，有很多未关闭的列表项和列表。也就是说，您可以使用
position:relative和
位置：绝对

有关我的解决方案，请参阅

清理导航：

<div class="nav">
  <ul>
    <li><a href="#">Index</a></li>
    <li><a href="#">Parks</a>
      <ul>
        <li><a href="disneyland.html">Disney Land</a></li>
        <li><a href="universal.html">Universal</a></li>
        <li><a href="buschgardens.html">Busch Gardens</a></li>
      </ul>
    </li>
    <li><a href="#">Restaurants</a>
      <ul>
        <li><a href="logans.html">Logans</a></li>
        <li><a href="outback.html">Outback</a>
          <ul>
            <li><a href="#">Test Restaurant</a></li>
          </ul>
        </li>
        <li><a href="perkins.html">Perkins</a>
      </ul>
    </li>
    <li><a href="statistics.html">Statistics</a></li>
  </ul>
</div>

问题是，您在所有标记的所有侧面都添加了填充。您应该组织您的css代码，以便只对所需的元素进行填充

您需要在锚定标记的所有侧面填充，因为您的菜单需要上面和下面的空格。然而，菜单中的子项也是锚定标记，同样的样式也应用于它们。因此，菜单子项之间存在额外的间隙

您可以使用类名创建div，并在类中添加所需的填充。
问题是您已经在所有标记的所有侧面添加了填充。您应该组织您的css代码，以便只对所需的元素进行填充

您需要在锚定标记的所有侧面填充，因为您的菜单需要上面和下面的空格。然而苏