问题 - 菜单悬停CSS

Question

<div id="menu">
                <ul>
                    <li><a href="index.html">HOME</a></li>
                    <li ><a href="about_us.html">ABOUT US</a></li>
                    <li><a href="products.html">PRODUCTS</a></li>
                    <li><a href="services.html">SERVICES</a></li>
                    <li><a href="enquiry.php">ENQUIRY</a></li>
                    <li><a href="contact_us.html">CONTACT US</a></li>
                </ul>
            </div>

CSS

#menu {
    width: 960px;
    padding: 0px;
    margin: 5px 0px 5px 0px;
    float: left;
    background-color: #a51c30;
    color: #FFFFFF;
    font-family: "Times New Roman", Times, serif;
    font-size: 16px;
}
    #menu ul {
        list-style-type: none;
        margin: 0px;
        padding:0px;
}

        #menu ul li {
            margin: 0px 0px 0px 0px;
            width: 130px;
            text-align: center;
            float: left;
            display:block;
        }

            #menu ul li a {
                text-decoration: none;
                color: #FFFFFF;
                font-family: "Times New Roman", Times, serif;
                font-size: 16px;

            }

#menu li a:hover {
        background-color:#FFFFFF;
        color:#a51c30;
        border-top:1px solid black;
        border-left:1px solid black;
        border-right:1px solid black;
        padding:10px;
        display:block;


    }

Fiddle

正如您在小提琴中看到的那样，在悬停时，样式不会应用于列表项空间..！

我希望像下面那样应用悬停样式

但是，由于侧面没有空间，而且悬停时问题也是白色，文字显示为白色，the fiddle of this part

我应该编辑哪个部分？

Answer 1

我添加了li而不是a的修补程序，就像这个

一样

#menu li:hover a{
    color:#a51c30;    
}

#menu li:hover{
    background-color:#FFFFFF;
    color:#a51c30;
    padding: 9px;
    border: 1px solid black;
}

还添加了一些调整。看看小提琴：http://jsfiddle.net/5sJ6D/15/

Answer 2

如果这是您的意思，您应该使用此#menu li:hover代替#menu li a:hover。下次尝试更清楚。