如何创建悬停效应以排斥其他链接

Question

我正在为我的网站创建一个主菜单，其中链接从悬停的链接中被驱逐出来，这是一种效果。当菜单为水平时，我可以工作。但是，当菜单为垂直时，如何获得排斥的链接？

我尝试过： - 添加margin-top和margin-bottom，但只有下面的链接被击倒，而悬停的链接本身也向下推。 - 将负margin-top添加到悬停的链接中，只会向上推动。 - 将负margin-top添加到悬停的链接中。

#MainMenu {
  position: absolute;
  margin: 0;
  top: 0;
  max-width: 100%;
  left: 50%;
  transform: translate(-50%);
  height: 240px;
}
.MainMenu-Wrapper {
  position: relative;
  width: auto;
  margin-top: 70px;
}
#MainMenu li {
  list-style-type: none;
  display: block;
}
#MainMenu a {
  text-decoration: none;
  font-size: 1em;
  margin: 0 2em;
  font-family: 'Montserrat', sans-serif;
  font-weight: 400;
  padding: 10px;
}

<ul id="MainMenu">
  <div class="MainMenu-Wrapper">
    <li>
      <a href="#">Link1</a>
    </li>
    <li>
      <a href="#">Link2</a>
    </li>
    <li>
      <a href="#">Link3</a>
    </li>
    <li>
      <a href="#">Link4</a>
    </li>
  </div>
</ul>

Answer 1

我设法使它起作用，但它远非完美。但是至少选择者正在做他们应该做的！

#MainMenu {
  padding: 0;
}
#MainMenu li {
  list-style-type: none;
  position: relative;
  transition: all 0.4s;
}
#MainMenu li:nth-child(2n) {
  background: #ddd
}
#MainMenu a {
  display: block;
  text-decoration: none;
  font-size: 1em;
  font-family: 'Montserrat', sans-serif;
  font-weight: 400;
  padding: 10px;
}
#MainMenu:hover li {
  top: -20px;
}
#MainMenu li:hover {
  top: 0;
}
#MainMenu li:hover~li {
  top: 20px;
}

<ul id="MainMenu">
    <li><a href="#">Link1</a></li>
    <li><a href="#">Link2</a></li>
    <li><a href="#">Link3</a></li>
    <li><a href="#">Link4</a></li>
    <li><a href="#">Link5</a></li>
    <li><a href="#">Link6</a></li>
</ul>

Answer 2

我仍然不确定我是否正确理解了您想完成的工作。但是像这样的东西吗？

#MainMenu {
  padding: 0;
}
#MainMenu li {
  list-style-type: none;
  position: relative;
  transition: all 0.4s;
}
#MainMenu li:nth-child(2n) {
  background: #ddd
}
#MainMenu a {
  display: block;
  text-decoration: none;
  font-size: 1em;
  font-family: 'Montserrat', sans-serif;
  font-weight: 400;
  padding: 10px;
}
#MainMenu:hover li {
  padding-top: 0;
}
#MainMenu li:hover {
  padding: 20px 0;
}

<ul id="MainMenu">
    <li><a href="#">Link1</a></li>
    <li><a href="#">Link2</a></li>
    <li><a href="#">Link3</a></li>
    <li><a href="#">Link4</a></li>
    <li><a href="#">Link5</a></li>
    <li><a href="#">Link6</a></li>
</ul>