Html 如何防止下拉菜单与边框重叠？

我有一个悬停下拉菜单，在悬停上加上边框后，我的下拉菜单和菜单重叠。试图添加填充物，但情况更糟。知道我在不悬停时有一个5px的透明边框，在悬停时在底部转换为5px的实心边框，您如何调整下拉列表的位置

#导航{
背景色：#e26a63；
}
#包裹{
左侧填充：60px；
高度：100px；
宽度：100%；
保证金：0自动；
显示：表格单元格；
垂直对齐：底部对齐；
}
#导航ul{
列表样式类型：无；
填充：0；
保证金：0；
位置：相对位置；
最小宽度：200px；
}
#李国荣{
显示：内联块；
边框：5px实心透明；
}
#nav ul li:悬停{
背景色：#cb5f59；
边框底部：5px实心#9e4a45；
}
#海军李娜，到访{
颜色：白色；
显示：块；
填充：15px；
文字装饰：无；
}
#导航ulli：悬停ul{
显示：块；
}
#导航ul{
显示：无；
位置：绝对位置；
背景色：#e26a63；
边界顶部：0；
左边距：-5px；
}
#李国宝{
显示：块；
}
#导航ulli a：悬停{
颜色：白色；
}

因为您已将下拉列表集成到标题中，如果您只是让标题可见，它可能会调整标题的大小

一个简单的解决方案是添加如下内容：

ul li ul{
    position: absolute;
    top: 58px;
}

通过使该元素成为绝对元素，我们将其从头代码中“断开”

---

注意：这个prabably不是完美的代码，但它可能会给你一个方向。

简短的回答是添加

页边顶部：5px

至

#nav ul

，其中

5px

是底部边框宽度的相同值

注意：以下样式集在悬停时输出梯形形状1下边框

#导航ul li{边框：5px实心透明；}
#nav ul li:悬停{边框底部：5px实心#9e4a45；}

将第一行中的

border

更改为

border-bottom

，然后它将输出一个真实的矩形形状

我还重新组织了CSS表格布局，使表格自动居中（我猜您希望这样做，但如果不这样做，很容易更改）。并删除下拉项中的边框样式

#导航{
背景色：#e26a63；
}
#包裹{
显示：表格；
高度：100px；
保证金：0自动；
}
#导航ul{
填充：0；
保证金：0；
显示：表格单元格；
垂直对齐：底部对齐；
}
#李国荣{
显示：内联块；
边框底部：5px实心透明；
}
#海军ulli a{
显示：块；
填充：15px；
文字装饰：无；
颜色：白色；
}
#导航ul{
显示：无；
位置：绝对位置；
背景色：#e26a63；
边缘顶部：5px；
}
#李国宝{
显示：块；
最小宽度：200px；
}
/*盘旋*/
#nav ul li:悬停{
背景色：#cb5f59；
边框底色：#9e4a45；
}
#导航ulli：悬停ul{
显示：块；
}
#导航李：悬停李{
边框底宽：0；
}

您的ul处于绝对位置，因此它隐式位于顶部：0px

只需将其设置为5px以补偿边框大小

#导航ul{
顶部：5px；/*已添加*/
}
#导航{
背景色：#e26a63；
}
#包裹{
左侧填充：60px；
高度：100px；
宽度：100%；
保证金：0自动；
显示：表格单元格；
垂直对齐：底部对齐；
}
#导航ul{
列表样式类型：无；
填充：0；
保证金：0；
位置：相对位置；
最小宽度：200px；
}
#李国荣{
显示：内联块；
边框：5px实心透明；
}
#nav ul li:悬停{
背景色：#cb5f59；
边框底部：5px实心#9e4a45；
}
#海军李娜，到访{
颜色：白色；
显示：块；
填充：15px；
文字装饰：无；
}
#导航ulli：悬停ul{
显示：块；
}
#导航ul{
显示：无；
位置：绝对位置；
背景色：#e26a63；
边界顶部：0；
左边距：-5px；
}
#李国宝{
显示：块；
}
#导航ulli a：悬停{
颜色：白色；
}

您可以将边框更改为长方体阴影，并且长方体阴影不会从长方体模型中出现

#nav ul li:hover {
    background-color: #cb5f59;
    box-shadow: 0 -2.2px 0 #9e4a45 inset,0 0 0 #9e4a45;
}