列表悬停弄乱整个导航 div

如何解决列表悬停弄乱整个导航 div

我对编码非常陌生，就像几天前一样，这个问题让我发疯。 每当我由于某种原因悬停链接或任何东西时，该列表的整个父级或列表中的其他元素有点像抽搐和改变位置。无论哪种方式，当我悬停一个元素时，我能做些什么来使它不会影响其他元素。

<nav id="firstnav">
       <ul class="firstList">
          <li <a href="#">Purple Buzz</a></li>
          <li <a href="#">Home</a></li>
          <li <a href="#">About</a></li>
          <li <a href="#">Work</a></li>
          <li <a href="#">Pricing</a></li>
          <li <a href="#"></a>Contact</li>
      </ul>
  </nav>

#firstnav{
width: 100%;
Box-shadow: 0 .5rem 1rem rgba(0,.15);
}

.firstList{
  list-style: none;
  display: inline-flex;

}

.firstList{
margin-left: 35%;
}

li{
margin-right: 30px;
margin-left: 30px;
}

li:hover{
  border: solid 1px purple;
  border-radius: 80px;
  padding: 10px;
}

解决方法

第一：你忘记了 li 的结尾椽子 >。

问题在于悬停时添加的 padding 和 border。 padding 和 hover 会更改 html 元素的初始大小，这会导致其他元素移动，并且父元素在您的情况下增长。要解决此问题，您可以先设置 padding。您使用透明颜色设置的border。然后在 hover 上，您只需更改边框的颜色。

喜欢这里。

#firstnav{
width: 100%;
box-shadow: 0 .5rem 1rem rgba(0,.15);
}

.firstList{
  list-style: none;
  display: inline-flex;

}

.firstList{
margin-left: 35%;
}

li{
margin-right: 30px;
margin-left: 30px;
padding: 10px;
  border: solid 1px transparent;
}

li:hover{
border-color: purple;
  border-radius: 80px;
}

<nav id="firstnav">
       <ul class="firstList">
          <li> <a href="#">Purple Buzz</a></li>
          <li> <a href="#">Home</a></li>
          <li> <a href="#">About</a></li>
          <li> <a href="#">Work</a></li>
          <li> <a href="#">Pricing</a></li>
          <li> <a href="#"></a>Contact</li>
      </ul>
  </nav>