Html 填充导航栏元素会影响所有导航栏

我试图让导航栏中的一个div在悬停时得到一个顶部填充。我的问题是，我所有的div都会产生相同的效果（它们都会下降），我只希望其中一个（我正在悬停的那一个），我希望其他div保持在相同的位置，相同的高度，没有任何变化

目前的情况是：

这是我当前的CSS：

div {
    height: 2em;
    width: 6em;
    border-radius: 5px;
    background-color: orange;
    display:inline-block;
}

div:hover{
    padding-top:2em;
}

---

你有什么建议？

将

垂直对齐：顶部打开
div

放置
垂直对齐：顶部打开
div


内联块
元素默认为
垂直底部对齐
。添加
垂直对齐：顶部

css


内联块
元素默认为
垂直底部对齐
。添加
垂直对齐：顶部

css

不确定是否被理解，因为看起来你非常接近这一点。
在悬停的项目上填充，并使兄弟项与顶部垂直对齐


不确定是否被理解，因为看起来你非常接近这一点。
在悬停的项目上填充，并使兄弟项与顶部垂直对齐


div {
    height: 2em;
    width: 6em;
    border-radius: 5px;
    background-color: orange;
    display:inline-block;
    vertical-align: top; /* add this */
}
div:hover {
    padding-top:2em;
}

div {
    height: 2em;
    width: 6em;
    border-radius: 5px;
    background-color: orange;
    display:inline-block;
    vertical-align: top;
    transition: padding .5s ease-in;
}

div:hover{
    **padding-top:2em;**
}