Html 子列表元素导致父ul之间存在间隙

我正在创建一个带有子菜单的简单导航

我希望

子菜单ul

的宽度为

139px

（悬停，下拉框的宽度为139px）。但是，当我设置此选项时，它也会在父链接之间创建一个间隙

例如：

在本例中，两个链接之间的宽度很好，但当您将鼠标悬停在

产品

链接上时，可以看到

产品

和

博客

之间的间隙

即使子菜单进入blog

li

区域，也没关系。现在只是想消除差距

.main_menu>div ul{
列表样式：无；
保证金：0；
填充：0；
显示器：flex；
弯曲方向：行；
}
.main_menu>div ul li{
显示：内联块；
垂直对齐：中间对齐；
线高：1米；
填充物：1.2em 0.9em；
字号：500；
颜色：#333；
边界半径：25%；
光标：指针；
}
/*在父悬停上显示下拉列表*/
.item有子项。菜单子项包装器{
边框：1px纯红；
高度：自动；
背景色：#fff；
伸缩方向：列！重要；
显示：无；
}
.项目有子项：悬停ul{
显示：块；
宽度：139px；
}

您需要在打开ul时添加绝对位置。希望能有帮助

.main_menu>div ul{
列表样式：无；
保证金：0；
填充：0；
显示器：flex；
弯曲方向：行；
}
.main_menu>div ul li{
显示：内联块；
垂直对齐：中间对齐；
线高：1米；
填充物：1.2em 0.9em；
字号：500；
颜色：#333；
边界半径：25%；
光标：指针；
}
/*在父悬停上显示下拉列表*/
.item有子项。菜单子项包装器{
边框：1px纯红；
高度：自动；
背景色：#fff；
伸缩方向：列！重要；
显示：无；
}
.项目有子项：悬停ul{
显示：块；
宽度：139px；
位置：绝对位置；
}