Una Duda con mi menu HTML y CSS

[codeman1234]

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

[codeman1234]

Bueno lo que realmente me da problema ahora es que quisiera hacer un menu como el de esta Web . Que mi menu que tiene alguna opcion que contenga submenu tenga una viñeta triangular ► con todo el menu de color negro y cuando se selecciona una opcion del menu que tiene submenu la viñeta cambie para abajo ▼, el color se cambie a un negro mas claro de ese item seleccionado y que el sub menu tenga los colores invertidos. Como esta en esa web que os comento.

Pero mi problema es que cuando intento invertir los colores del submenu los colores de la fuente afectan todo el menu y el submenu entonces cuando intento invertir el color del submenu la fuente y el backgroud los dos me salen en blanco y no se ve la fuente del submenu.

Una duda como pongo la viñeta triangular? es una imagen? y el cambio se hace poniendo dos imagenes una hacia la derecha y otra hacia la izquierda en #menu li a y otra para: #menu li a:hover??

como podria solucionarlo? alguna idea? Mi codigo CSS esta en el post anterior, alguna idea?

Saludos y gracias

[codeman1234]

Alguien entiende lo que digo y como solucionarlo?


Saludos y gracias

[lucasbanegas]

Tenes que usar la subclase a:hover

Por ejemplo:

a:hover {background-color: red; display: block; width: 100px; height: 50px;}

De este modo, tu enlace se convertira en un bloque de 100px de ancho x 50px de alto con fondo rojo.

La flecha de la que hablas es un "backgrund-image" con atributo "no-repeat" alineado a la derecha y al centro verticalmente. La imagen de la flecha deberia estar en png con fondo transparente.

[lucasbanegas]

Tambien podes poner la imagen dentro del enlace, despues o antes del texto. Por cierto, de la forma que te dije recien, el texto va a quedar alineado arriba. Otra opcion es no ponerle height (alto) al bloque sino un padding-top y un padding-bottom iguales, por ejemplo de 5px los dos, para que el texto te quede centrado verticalmente.

[Drakerz]

Te recomiendo que hagas el Menú desplegable en flash o en fireworks, si lo haces en flash puedes hacer un lindo menú, y agregarle algún efecto que consideres que luzca bien con dicho menú!

[codeman1234]

Muchas gracias por responder lucasbanegas y Drakerz creo que ya lo consegui, gracias a vuestros consejos.


Saludos