Hola,
estoy con una web y tengo un menu que cuando se pasa el raton encima de alguna de las opciones del menu despliega un sub menu abajo en vertical. Me va perfectamente cuando se despliega el sub menu quita lo subrayado para que el usuario sepa que opcion esta escojiendo.
Pero quisiera saber que etiqueta de css tengo que poner para que cuando el usuario pasa el raton en el sub menu el menu (del submenu) cambie de color y para que notifique al usuario que esta en ese submenu.
Este es mi codigo CSS del menu:
Código:
#menucontainer{
height:29px;
display:block;
padding:0px 0 0px 0px;
border-top:1px solid #9d181b;
font: 14px "Century gothic",verdana, Arial, sans-serif;
font-weight:normal;
background-color: #000000; /* ##### CAMBIA COLOR DE MENU*/
}
#menu ,#menu ul {
margin: 0px;
padding: 0px;
list-style: none;
height:29px;
background-color: #000000;
}
#menu a {
color: #FFFFFF;
display: block;
font-weight: bolder;
padding: 4px 10px 6px 10px;
width:100px;
font-size: 16px;
text-align: center;
text-decoration: underline;
background-color: #000000;
}
#menu a:hover {
color: #000000;
display: block;
text-decoration:none;
}
#menu li {
float: left;
margin: 0px 0 0px 0;
padding: 0px;
}
#menu li li {
color: #000000;
padding-right: 10px;
padding-left: 0px;
padding-bottom: 0px;
padding-top: 0px;
background-color: #FFFFFF;
float: left;
margin: px 0px 0px 5px;
width: 130px;
}
#menu li li a, #menu li li a:link, #menu li li a:visited {
background: no-repeat;
width: 130px;
float: none;
margin: 0px;
padding: 4px 10px 5px 10px;
}
#menu li li a:hover, #menu li li a:active {
padding-right: 10px;
background-color: #000000;
border-bottom:1px solid #000000;
border-right:1px solid #000000;
border-left:1px solid #000000;
padding-left: 10px;
padding-bottom: 5px;
padding-top: 4px;
width: 120px;
float: none;
margin: 0px;
color: #000000;
}
#menu li ul {
position: absolute;
width: 10em;
left: -999em;
}
#menu li:hover ul {
left: auto;
display: block;
}
#menu li:hover ul, #menu li.sfhover ul {
left: auto;
}
#catmenucontainer{
height:29px;
display:block;
padding:0px 0 0px 0px;
font: 14px "Century gothic",verdana, Arial, sans-serif;
font-weight:normal;
color: #000000;
}
#catmenu ,#catmenu ul {
margin: 0px;
padding: 0px;
list-style: none;
height:29px;
background-color: #66CC99;
}
#catmenu a {
color: #000000;
display: block;
font-weight: normal;
padding: 4px 10px 6px 10px;
}
#catmenu a:hover {
color: #000000;
display: block;
}
#catmenu li {
float: left;
margin: 0px;
padding: 0px;
}
#catmenu li li {
float: left;
margin: 0px 0px 0px 0px;
padding: 0px;
width: 130px;
}
#catmenu li li a, #catmenu li li a:link, #catmenu li li a:visited {
width: 130px;
float: none;
margin: 0px;
padding: 4px 10px 5px 10px;
color: black;
}
#catmenu li li a:hover, #catmenu li li a:active {
width: 130px;
float: none;
margin: 0px;
padding: 4px 10px 5px 10px;
color: #000000;
}
#catmenu li ul {
position: absolute;
width: 10em;
left: -999em;
}
#catmenu li:hover ul {
left: auto;
display: block;
}
#catmenu li:hover ul, #catmenu li.sfhover ul {
left: auto;
}
Saludos y gracias
PD: Si se me olvido algo avisarme