Question

I'm trying to make a dropdown navigation menu item change background color when it is hovered over.

Here is my 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;
}

And 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;
}

Answer 2

CSS中存在多种语法错误。

我已将其清理了一下，但我建议您在W3C validator中执行此操作。

看起来你应该read up on how CSS selectors work，看看有关这个问题的其他评论。

How do I change the background color of a list item on hover?

2 个答案: