changer la couleur des coins arrondis bouton avec CSS

Question

merci beaucoup à l'avance!

J'ai été en mesure de faire un bouton de coin arrondi en utilisant CSS. J'aime être capable de passer la souris sur le bouton, et la chose entière change de couleur, pas seulement la plus div intérieure. aide de plz!

mon hypothèse est que je suis supposé avoir un peu javascript avec onmouseover = "", correct?

est ici la page: http://biozenconsulting.com/new/

(? Aussi, comment puis-je me débarrasser des petites boîtes qui apparaissent sur les coins droite vue dans IE8 et Chrome)

Voici le code HTML:

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

et voici le 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

J'ai remplacé le div externe par un lien et ajouté un peu de 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 */ 

Answer 2

Stu Nicholls de site css play a beaucoup d'exemples de la façon de le faire sans JavaScript. C'est une excellente ressource.