cambio de color del botón de esquinas redondeadas con CSS

¡Muchas gracias de antemano!

Pude hacer un botón de esquina redondeada usando CSS. me gusta poder desplazar el mouse sobre el botón, y todo cambia su color, no solo el div más interno. por favor ayuda!

mi suposición es que iam supuestamente tiene algún tipo de javascript con onmouseover = “”, ¿correcto?

aquí está la página: http://biozenconsulting.com/new/

(también, ¿cómo me deshago de las pequeñas cajas que aparecen en las esquinas correctas cuando se ven en IE8 y Chrome?)

este es el código HTML:

 

y aquí está el 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%; }  .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; }  

Reemplacé el div externo con un enlace y agregué un poco de CSS.

HTML

   
Home

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

El sitio de Stu Nicholls css play tiene muchos ejemplos de cómo hacerlo sin javascript. Es un recurso realmente excelente.