Foros del Web » Creando para Internet » CSS »

Una Duda con mi menu HTML y CSS

Estas en el tema de Una Duda con mi menu HTML y CSS en el foro de CSS en Foros del Web. 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 ...
  #1 (permalink)  
Antiguo 27/03/2010, 11:39
Avatar de codeman1234  
Fecha de Ingreso: marzo-2008
Mensajes: 545
Antigüedad: 9 años, 9 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 11:20
  #2 (permalink)  
Antiguo 28/03/2010, 11:16
Avatar de codeman1234  
Fecha de Ingreso: marzo-2008
Mensajes: 545
Antigüedad: 9 años, 9 meses
Puntos: 2
Respuesta: Una Duda con mi menu HTML y CSS

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

Última edición por codeman1234; 28/03/2010 a las 13:40
  #3 (permalink)  
Antiguo 28/03/2010, 15:26
Avatar de codeman1234  
Fecha de Ingreso: marzo-2008
Mensajes: 545
Antigüedad: 9 años, 9 meses
Puntos: 2
Respuesta: Una Duda con mi menu HTML y CSS

Alguien entiende lo que digo y como solucionarlo?


Saludos y gracias
  #4 (permalink)  
Antiguo 28/03/2010, 15:33
 
Fecha de Ingreso: marzo-2010
Ubicación: Córdoba, Argentina
Mensajes: 21
Antigüedad: 7 años, 8 meses
Puntos: 0
Respuesta: Una Duda con mi menu HTML y CSS

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.
  #5 (permalink)  
Antiguo 28/03/2010, 15:35
 
Fecha de Ingreso: marzo-2010
Ubicación: Córdoba, Argentina
Mensajes: 21
Antigüedad: 7 años, 8 meses
Puntos: 0
Respuesta: Una Duda con mi menu HTML y CSS

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.
  #6 (permalink)  
Antiguo 28/03/2010, 15:36
Avatar de Drakerz  
Fecha de Ingreso: marzo-2010
Mensajes: 182
Antigüedad: 7 años, 8 meses
Puntos: 12
Respuesta: Una Duda con mi menu HTML y CSS

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ú!
  #7 (permalink)  
Antiguo 28/03/2010, 18:59
Avatar de codeman1234  
Fecha de Ingreso: marzo-2008
Mensajes: 545
Antigüedad: 9 años, 9 meses
Puntos: 2
Respuesta: Una Duda con mi menu HTML y CSS

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


Saludos

Etiquetas: html
Atención: Estás leyendo un tema que no tiene actividad desde hace más de 6 MESES, te recomendamos abrir un Nuevo tema en lugar de responder al actual.
Respuesta




La zona horaria es GMT -6. Ahora son las 14:18.