Html 如何设置列表项向上的高度的动画，而不扭曲其他列表项？

我试图在菜单中创建的悬停效果有点问题。我只是希望每个框在悬停时向上移动一点。然而，根据我制作的，高度变化很好，但它需要列表中的所有其他a。我希望它可以单独更改高度，而不移动其他菜单项

有人对我应该怎么做来解决这个问题有什么建议吗

我曾尝试在单个a而不是ul上进行绝对定位，但这破坏了居中（所有列表项相互折叠，我被迫进行不精确的定位，无法与浏览器正确缩放）

谢谢你的时间和耐心（我是新手，还在学习。）

这里有一个例子来说明我在说什么

以下是标记：

<div class="navband">
   <div class="nav">
     <ul>
       <li><a href="#">Work</a></li>
       <li><a href="#">About</a></li>
       <li><a href="#">Blog</a></li>
       <li><a href="#">Contact</a></li>
     </ul>
   </div>
</div>

---

以下是我的想法：

希望这有帮助

添加了一个单独的容器：

<div class="navband">
   <div class="nav">
     <ul>
       <li><div class="nest"><a href="#">Work</a></div></li>
       <li><div class="nest"><a href="#">About</a></div></li>
       <li><div class="nest"><a href="#">Blog</a></div></li>
       <li><div class="nest"><a href="#">Contact</a></div></li>
     </ul>
   </div>
</div>

编辑： 抱歉，没有发布最新版本。但这里是最后一个有效的CSS：

.nav {
    text-align: center;
}

.nav ul {
    position: absolute;
    bottom: 0;
    margin-left: auto;
    margin-right: auto;
    padding-bottom: 0px;
    margin-bottom:0;
    left: 0;
    right: 0;
    height:150px;
}

.nav ul li {
    list-style: none;
    display: inline-block;
    padding-left: 0.5em;
    padding-right: 0.5em;
    background:white;
    height:150px;
}

.nav ul li a {
    display: inline-block;
    text-decoration: none;
    background:#F7941E;
    color: #414042;
    text-transform: uppercase;
    height: 130px;
    width: 120px;
}
.nest{
    display:inline-block;
    margin-bottom:0px;
    height:130px;
    background-color: #F7941E;
}
.nest a:hover{
    position:relative;
    top:-20px;
    height: 150px;
}

---

使用填充，如下所示：

.nav ul li a:hover {
padding-top:30px;
}

---

Fiddle:

实现这一点的一个想法是，将

边距顶部

属性移动

由于在

li

上应用了

display:inline

，

页边距顶部

和

页边距底部

在

a

上不起作用。可以考虑使用<代码>显示：块 <代码> LI<代码>，并将它们浮动到左侧

.nav ul li {
    display: block;
    float: left;
}

然后将边距顶部设置为

a

，并在悬停时将其删除

.nav ul li a {
    margin-top: 20px;
}

.nav ul li a:hover {
    margin-top: 0;
}

因此，您将获得所需的输出

---

您可以使用嵌套的div来占据整个高度，然后在上方悬停时将内部div与顶部或底部垂直对齐，这可能会解决您的问题。显然，最好的答案是，我会添加一个

过渡：填充顶部1.5s只是为了使它平滑，但这是个人偏好。是的，过渡肯定会使它更有趣。我发布了另一个答案，类似的，但当你悬停时，文本实际上会向上移动。这个版本不会移动文本，所以我想这是个人对最终外观的偏好。他不想让它们与活动的对齐，除非我看错了帖子。对不起，我发布的第一个css不是最终的，它让div向下而不是向上。但是添加了编辑，一切都很好。我想他希望项目向上移动，但其他项目保持向下。谢谢回复！我确实试过这个，但我需要它向上移动。
.nav ul li {
    display: block;
    float: left;
}

.nav ul li a {
    margin-top: 20px;
}

.nav ul li a:hover {
    margin-top: 0;
}