changing color of rounded corners button with CSS

Question

thanks a bunch in advance!

i was able to make a rounded corner button using CSS. i like to be able to mouseover the button, and the entire thing changes its color, not just the inner most div. plz help!

my assumption is that iam supposed to have some kinda javascript with onmouseover="", correct?

here's the page: http://biozenconsulting.com/new/

(also, how do i get rid of the small boxes that appear on the right corners when viewed in IE8 and Chrome?)

this is the HTML code:

<div class="nav_menu" onclick="location.href='index.htm'">
    <b class="top_menu"><b class="top_menu1"><b></b></b><b class="top_menu2"><b></b></b><b class="top_menu3"></b><b class="top_menu4"></b><b class="top_menu5"></b></b>
    <div class="top_menufg">
     <!-- content goes here -->
     Home
    </div>
    <b class="top_menu"><b class="top_menu5"></b><b class="top_menu4"></b><b class="top_menu3"></b><b class="top_menu2"><b></b></b><b class="top_menu1"><b></b></b></b>
</div>

and here's the CSS:

.nav_menu {
    text-align: center;
    color: #353535;
    font-size: 20pt;
    font-family: Verdana, Geneva, sans-serif;
    float: left;
    width: 33%;
}

#about {
    margin: 0 .5% 0 .5%;
}

<!-- For rounded boxes -->
.top_menu {
    display:block
    overflow: hidden;
}
.top_menu *{
    display:block;
    height:1px;
    overflow:hidden;
    font-size:.01em;
    background:#AAAAAA
}

.top_menu1{
    margin-left:3px;
    margin-right:3px;
    padding-left:1px;
    padding-right:1px;
    border-left:1px solid #AAAAAA;
    border-right:1px solid #AAAAAA;
    background:#AAAAAA
}
.top_menu2{
    margin-left:1px;
    margin-right:1px;
    padding-right:1px;
    padding-left:1px;
    border-left:1px solid #AAAAAA;
    border-right:1px solid #AAAAAA;
    background:#AAAAAA
}
.top_menu3{
    margin-left:1px;
    margin-right:1px;
    border-left:1px solid #AAAAAA;
    border-right:1px solid #AAAAAA;
}
.top_menu4{
    border-left:1px solid #AAAAAA;
    border-right:1px solid #AAAAAA
}
.top_menu5{
    border-left:1px solid #AAAAAA;
    border-right:1px solid #AAAAAA
}
.top_menufg{
    background:#AAAAAA
}
.top_menufg:hover{
    background-color: #888888;
    cursor: pointer;
}
<!-- For rounded boxes -->

Answer 1

Stu Nicholls's site css play has a lot of examples of how to do this without javascript. It's a really excellent resource.

Answer 2

I replaced the outer div with a link and added a little bit of CSS.

HTML

<a class="nav_menu" href="index.htm">
 <b class="top_menu"><b class="top_menu1"><b></b></b><b class="top_menu2"><b></b></b><b class="top_menu3"></b><b class="top_menu4"></b><b class="top_menu5"></b></b>
 <div class="top_menufg">
  <!-- content goes here -->
  Home
 </div>
 <b class="top_menu"><b class="top_menu5"></b><b class="top_menu4"></b><b class="top_menu3"></b><b class="top_menu2"><b></b></b><b class="top_menu1"><b></b></b></b>
</a>

CSS

.nav_menu {
 text-align: center;
 color: #353535;
 font-size: 20pt;
 font-family: Verdana, Geneva, sans-serif;
 float: left;
 width: 33%;
 text-decoration: none;
}
/* For rounded boxes */
.top_menu {
 display:block
 overflow: hidden;
}    
.top_menu * {
 display:block;
 height:1px;
 overflow:hidden;
 font-size:.01em;
 background:#AAAAAA
}    
.top_menu1 {
 margin-left:3px;
 margin-right:3px;
 padding-left:1px;
 padding-right:1px;
 border-left:1px solid #AAAAAA;
 border-right:1px solid #AAAAAA;
 background:#AAAAAA
}
.top_menu2 {
 margin-left:1px;
 margin-right:1px;
 padding-right:1px;
 padding-left:1px;
 border-left:1px solid #AAAAAA;
 border-right:1px solid #AAAAAA;
 background:#AAAAAA
}
.top_menu3 {
 margin-left:1px;
 margin-right:1px;
 border-left:1px solid #AAAAAA;
 border-right:1px solid #AAAAAA;
}
.top_menu4 {
 border-left:1px solid #AAAAAA;
 border-right:1px solid #AAAAAA
}
.top_menu5 {
 border-left:1px solid #AAAAAA;
 border-right:1px solid #AAAAAA
}
.top_menufg {
 background:#AAAAAA
}
a.nav_menu:hover b, a.nav_menu:hover div  {
 background-color: #888888;
 cursor: pointer;
}
/* For rounded boxes */