Ver Mensaje Individual
  #1 (permalink)  
Antiguo 27/03/2010, 10:39
Avatar de codeman1234
codeman1234
 
Fecha de Ingreso: marzo-2008
Mensajes: 545
Antigüedad: 16 años, 8 meses
Puntos: 2
Una Duda con mi menu HTML y CSS

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

Última edición por codeman1234; 28/03/2010 a las 10:20