Html 如何使用悬停和填充向上移动每个li

我试图让每个li在用户悬停时增加几个像素，但似乎我的数学和css技能没有帮助。正如你现在看到的，每一个李都在同时向上移动。如果有人能给我一个快速的诀窍或者更好的方法来实现这一点，我将不胜感激

多谢各位

nav-ul{
保证金：0；
填充：1rem；
文本转换：大写；
字体大小：300；
字体系列：“蒙特塞拉特”，无衬线；
字体大小：1.5rem；
}
李国荣{
保证金：0.1rem；
显示：内联块；
光标：指针；
填充：10px 20px；
}
nav ul li:悬停{
填充：15px 20px 15px；
}

家
关于
投资组合
恢复
联系方式

已修复。使用垂直对齐：顶部

以下是工作示例：

---

您使用的是

display:inline block

，这就是为什么将鼠标悬停在所有

li

移动上，所以您需要使用

float:left

并设置

li

的高度

*，：之后，：之前{
-webkit框大小：边框框；
-moz框大小：边框框；
框大小：边框框；
}
导航ul{
保证金：0；
填充：1rem；
文本转换：大写；
字体大小：300；
字体系列：“蒙特塞拉特”，无衬线；
字体大小：1.5rem；
列表样式类型：无；
}
李国荣{
保证金：0.1rem；
浮动：左；
光标：指针；
填充：10px 20px；
高度：50px；
过渡：全部.2s线性；
}
nav ul li:悬停{
填充：15px 20px 15px；
高度：50px；
}

家
关于
投资组合
恢复
联系方式

谢谢！还有一个问题，垂直对齐：顶部如何帮助这项工作？为什么填充设置（6px和0px）与（10px）不同？谢谢。“我已经一个星期没碰CSS了，这确实让我忘记了很多东西。”永俊荣欢迎朋友

nav ul {
  margin:0;
  padding:1rem;
  text-transform: capitalize;
  font-weight:300;
  font-family: 'Montserrat', sans-serif;
  font-size:1.5rem;
}

nav ul li {
  margin:0 1rem;
  display:inline-block;
  cursor:pointer;
  padding:10px 20px;
  vertical-align: top;
  transition: all .2s ease-in-out;
}


nav ul li:hover {
  padding: 6px 20px 0 20px;
}