html - 我的 不工作，悬停属性也不工作

Question

所以我用 div 制作了这个顶部菜单，因为这个人想要盒子并且希望它们的大小完全相同，而不管文本如何。它看起来不错，但不会激活属性或悬停。请帮忙。

CSS 是

.headerbottomcontainer {
    width: 100%;
    max-width: 980px;
    margin-left: auto;
    margin-right: auto;
    min-height: 78px;
    border: 1px dotted #27c3ed;
}

.headerbottomleft {
    width: 290px;
    float: left;
    padding-left: 5px;
    padding-right: 5px;
    border: 1px dotted #F36;
    min-height: 66px;
}

.headerbottomright {
    width: 640px;
    margin-left: 15px;
    min-height: 66px;
    float: left;
    border: 1px dotted #27c3ed;
}


.headerbottomrighttop {
    height: 28px;  /*Change to 30 when remove borders*/
    width: 100%;
    border: 1px dotted #093;
}

.headerbottomrightbottom {
    height: 28px;  /*Change to 30 when remove borders*/
    width: 100%;
    margin-top: 10px;
    border: 1px dotted #C60;
    }

.navbuttonfirst {
    width: 122px;
    height: 16px; /*Change to 30 when remove borders*/
    font-size: 16px;
    color: #fff;
    border: 1px solid #f00;
    float: left;    
    text-align: center;
    padding-top: 5px;
    padding-bottom: 7px;
    border-radius: 3px;

}

.navbutton {
    margin-left: 5px;
    width: 122px;
    height: 16px; /*Change to 30 when remove borders*/
    font-size: 16px;
    color: #fff;
    border: 1px solid #f00;
    float: left;    
    text-align: center;
    padding-top: 5px;
    padding-bottom: 7px;
    border-radius: 3px;
}

.navbutton:hover{
    background-color:#f00;
}

HTML 是

    <div class="headerbottomcontainer">
        <div class="headerbottomleft">
        </div>

        <div class="headerbottomright">
            <div class="headerbottomrighttop">

                <div class="navbuttonfirst">
                    <a href="http://www.jetnightclub.com/events.html">Events</a>
                </div>
                <div class="navbutton">
                <a href="photos.html">Photos</a>
                </div>
                <div class="navbutton">
                    <a href="videos.html">Videos</a>
                </div>
                <div class="navbutton">
                    <a href="ourclub.html">Club Info</a>
                </div>
                <div class="navbutton">
                    <a href="contact.html">Contact</a>
                </div>

            </div>

            <div class="headerbottomrightbottom">
                <div class="navbuttonfirst">
                    <a href="birthdays.html">Birthdays</a>
                </div>
                <div class="navbutton">
                    <a href="barhop.html">Bar Hop</a>
                </div>
                <div class="navbutton">
                    <a href="newyears2013-2014.html">New Year's</a>
                </div>
                <div class="navbutton">
                    In the mix
                </div>
                <div class="navbutton">
                    Downloads
                </div>
            </div>
        </div>
    </div>

Answer 1

尝试

.navbutton:悬停{ 背景色:#FF0000；

.navbuttonfirst:悬停{ 背景色:#FF0000；

放在里面，即......您必须为此添加悬停效果。请原谅我的颜色选择。