问：在Html中徘徊

Question

我的菜单栏无法使用悬停时遇到问题。我尝试了它与页面的另一部分，它工作得很好，但没有与菜单。我在这里做错了什么？

.menu{
    display: flex;
    justify-content: center;
    margin: auto;
    background: #e7e3d4;
}

.menu ul li{
    list-style: none;
    float: left;
    color: #b23850;
    margin: 0 13px;
    font-size: 20px;
    display: flex;
}

.menu ul li:hover{
    background: 8590AA;
    delay:.5s;
}

        <div class="menu">
             <ul>
                 <li>Home</li>
                 <li>Services</li>
                 <li>Know Joe</li>
                 <li>Contact Us</li>
             </ul>
        </div>

Answer 1

您可以使用背景颜色属性使用＃sign，如下所示：

.menu ul li:hover {
    background: #8590AA;
} 

.menu{
    display: flex;
    justify-content: center;
    margin: auto;
    background: #e7e3d4;
}

.menu ul li{
    list-style: none;
    float: left;
    color: #b23850;
    margin: 0 13px;
    font-size: 20px;
    display: flex;
    padding: 0 10px;
}

.menu ul li:hover{
    background: #8590AA;
    transition: all 0.55 ease-in;
}

<div class="menu">
             <ul>
                 <li>Home</li>
                 <li>Services</li>
                 <li>Know Joe</li>
                 <li>Contact Us</li>
             </ul>
        </div>

Answer 2

使用transition: background-color 0.5s代替delay: 0.5s

.menu {
  display: flex;
  justify-content: center;
  margin: auto;
  background: #e7e3d4;
}

.menu ul {
  padding: 0;
  margin: 0;
  display: flex;
}

.menu ul li {
  list-style: none;
  color: #b23850;
  padding: 15px;
  font-size: 20px;
  background-color: #e7e3d4;
}

.menu ul li:hover {
  background-color: #8590AA;
  transition: all .5s;
}

<div class="menu">
  <ul>
    <li>Home</li>
    <li>Services</li>
    <li>Know Joe</li>
    <li>Contact Us</li>
  </ul>
</div>

Answer 3

您在菜单ul li：hover 的背景属性中缺少＃符号 尝试以下

.menu ul li: hover{
 background: #8590AA;
 delay :0.5s;
 }