Мой <a> не работает и не является свойством hover

Поэтому я сделал это главное меню с divs, потому что парень хочет коробки и хочет, чтобы они были одинакового размера независимо от текста. Он выглядит хорошо, но не активирует свойство или зависание. Пожалуйста помоги.

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 IS

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