html - Q : Hovering In 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

您可以使用背景颜色属性使用 # 符号，如下所示:

.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>