html - CSS - 悬停在元素上会影响多个元素

Question

我有一个 float 在屏幕上的菜单，当将鼠标悬停在其中一个元素上时，它会执行它必须执行的操作，其余部分的不透明度会发生变化，并且只会强调悬停的元素。但是当悬停在空白区域的元素之间时，中间的一小部分空间会改变所有元素的不透明度。如果我将鼠标悬停在靠近其底部或顶部的元素以及所有元素之间的空间上，它会执行应有的操作。我知道这与 <ul> 有关标记，但不知道如何解决。 这是代码:

HTML

<div class="menu">
  <ul>
    <li><a>Home</a></li>
    <li><a>About</a></li>
    <li><a>Projects</a></li>
    <li><a>Services</a></li>
    <li><a>Contact</a></li>
  </ul>
</div>

CSS

.menu {
    float:right;
    margin-right: 50px;
    }
ul li {
    display: inline;
    text-decoration: none; 
    color: #003560;
    padding: 10px 50px;
    transition: all ease .3s;
    }
ul:hover li {
    color: #0089F9;
    opacity: .1;
    transition: all ease .3s;
    }
ul li:hover {
    opacity: 1;
    padding: 15px 55px;
    }
li {
    border: 2px solid #0089F9;
    border-radius: 5px;
    margin-left: 20px;
    }

https://jsfiddle.net/Vc2ug/49/

Answer 1

您可以使用 float: left 而不是 display: inline

ul li {
    display: block;
    float: left;
    text-decoration: none; 
    color: #003560;
    padding: 10px 50px;
    transition: all ease .3s;
}

https://jsfiddle.net/7w8w86my/1/