添加填充而不影响其他菜单项

Question

使用以下CSS时，我从顶部的图像输出到底部的图像：

.menu-border  {
border: 1px solid #000000;
padding: 30px 0px;
border-radius: 4px;
}

目的是为了使大型菜单具有较大的悬停区域，否则当鼠标位于“评估”菜单和大型菜单框之间时，大型菜单会消失。但是，当我的填充为30px时，所有菜单项都向上移动。在不影响菜单的其余部分的情况下，我需要添加些什么来保持该大框（边缘将为白色-我将其放置为黑色，以便现在更容易看到）？

edit1：菜单是从wordpress的珍珠主题生成的。 .menu-border是为“评估”菜单添加的CSS类。

Answer 1

如果我们能得到有效的摘录，帮助会更容易。

此外，您的捕获中有两个菜单。我想添加代码是第二个。看起来您缺少vertical-align属性

.menu-border  {
   border: 1px solid #000000;
   padding: 30px 0px;
   border-radius: 4px;
   vertical-align: middle;
}

Answer 2

我不确定您要查找的内容是什么，但是对此使用inline-block属性的CSS有所了解-

.menu-border  {
display: inline-block;
border: 1px solid #000000;
padding: 30px 0px;
border-radius: 4px;
}

进一步阅读CSS inline-block https://www.w3schools.com/css/css_inline-block.asp

Answer 3

如果有人遇到了这个问题，解决方案是用此代码替换我的代码

body .stm-header .stm-navigation__default > ul > li > a {
padding: 30px 30px;
}