html - 如何在悬停时更改列表项的背景颜色？

Question

我试图让下拉导航菜单项在鼠标悬停时更改背景颜色。

这是我的 CSS:

#nav {
    background: #32CAFF;
}

#navi > li {
    display: inline-table;  
    background: #32CAFF;
    margin: 8px;
    border-radius: 4px;
    position: relative;
    transition: all 0.40s;
}

#opt li {
    float: bottom;
    transition: all 0.40s;
}

ul ul {
    display: none;
    list-style: none;
    transition: all 0.35s;

}

ul li:hover > ul {
    display: block;
    transition: all 0.40s;
}

ul, li, ul, li {
    margin: 0px;
    padding: 10px;
}

ul li ul li {
    position: relative;
    right: 16px;
}

#navi li:hover {
    background: #40BE3D;
    opacity: 1;
}

#opt li:hover {
    background: #E3B25A;
    margin: 0px;
}

#next {
    position: absolute;
    right: 900px;
}

#next ul {
    list-style: none;
}

和 HTML:

<div id="wraper">
    <nav id="nav">
        <ul id="navi">
            <li href="#">Home</li>
            <li href="#">Video</li>
            <li href="#">Tutorials 》
                <ul id="opt" >
                    <li>Tutorial 1</li>
                    <li>Tutorial 2</li>
                    <li>Tutorial 3</li>
                    <li>Tutorial 4</li>
                </ul>
            </li>
            <li href="#">About us</li>
        </ul>
    </nav>
</div>
<div id="next">
    <ul>
        <li>item</li>
        <li>item</li>
    </ul>
</div>

Answer 1

替换

#nav {
    background: #32CAFF;
}

与

#wraper{
    background:#32CAFF;
    width: 100%;
    height: 75px;
}
#navi{
    position:absolute;
}