css - 当其中一个按钮也悬停时，让按钮向左移动

Question

当您将鼠标悬停在位于 http://hijinxnetwork.net/web.html 的菜单按钮之一上时，右侧的按钮，但不是左侧的按钮。我希望左侧的按钮也能移动。

CSS:

#nav {
  width:800px;
margin:0 auto;
}
#nav ul {
  position:relative;
  top:187px;
  left:auto;
  right:auto;
}
#nav li {
  float:left;
  display:inline;
  display:block;
  margin-left:3px;
  margin-right:3px;
  padding-left:20px;
  padding-right:20px;
  font-family: 'Roboto', sans-serif;
  font-weight:100;
  text-transform:uppercase;
  font-size:24px;
  background-color: #363636;
  height:50px;
  padding-top:20px;
  transition: 1s;
  position:relative;
  left: 0;
}
#nav li:hover {
  font-size:30px;
  background-color:#a61919;
  height:60px;
  margin-right: -10px;
  left: -10px;
  margin-left:10px;
}
#nav li a {
  color:#ffffff;
  text-decoration:none;
}

Answer 1

按照您的代码，这应该可以工作:

#nav ul {
  left: 0px;
  right: 0px;
  transition: 1s;
}

#nav ul:hover {
   left: -5px;
   right: -5px;
}

这将使按钮向两侧平均移动。它将“展开”动画添加到 ul 元素，每边 5 像素。