Ayuda con menú vertical: Problema al pasar el ratón por encima de opciones del menú

Xanina · 16 May 2014

aquí está mi web:
Tere Rico

le he puesto un menú vertical a la izquierda y al pasar con el ratón por encima de las opciones del menú (li:hover), en las opciones que pone el texto en dos líneas, me queda mal

uff... no sé si son las horas, pero veo que me estoy explicando muy mal :s

resumiendo, pasando con el ratón por encima de la sección del menu "preguntas frecuentes" ¿veis como queda mal lo que configuré con el hover?
creo que debe de ser una tontería, pero no se me ocurre cómo solucionarlo... ¿alguien me sabría ayudar??

muchas gracias por anticipado

kanikase · 16 May 2014

A eso te refieres, si es eso, quitale el background o agregale un height

Xanina · 16 May 2014

kanikase dijo:
A eso te refieres, si es eso, quitale el background o agregale un height

sí, es eso :encouragement:, pero no le quiero quitar el background, pq quiero que marque las opciones así al pasar por encima... y ponerle un height.. he probado y no veo ningún cambio
¿dónde le tendría que poner el height? yo se lo he probado en

Insertar CODE, HTML o PHP:

nav ul li a:hover { height: 50px; }

y no veo que haga nada distinto

el problema es que lo trata como si fueran dos líneas, dos opciones de menú, y realmente es una sóla opcion que va en dos líneas por el tamaño del texto

kanikase · 16 May 2014

Xanina dijo:
sí, es eso :encouragement:, pero no le quiero quitar el background, pq quiero que marque las opciones así al pasar por encima... y ponerle un height.. he probado y no veo ningún cambio
¿dónde le tendría que poner el height? yo se lo he probado en

Insertar CODE, HTML o PHP:

nav ul li a:hover { height: 50px; }

y no veo que haga nada distinto

el problema es que lo trata como si fueran dos líneas, dos opciones de menú, y realmente es una sóla opcion que va en dos líneas por el tamaño del texto

Intenta con un float:left
Si eso funciona, y al ul quitale el margin-bottom:30px;

Xanina · 16 May 2014

kanikase dijo:
Intenta con un float:left
Si eso funciona, y al ul quitale el margin-bottom:30px;

uff, cierto!! con el float left arreglas el problema de "preguntas frecuentes" pero desmadras todo el menú al pasar con el ratón por encima ¿has comprobado lo que hace ahora? :ambivalence:

lo del margin del ul... ¿a que se debe?

gracias por tu interés :encouragement:

kanikase · 16 May 2014

Xanina dijo:
uff, cierto!! con el float left arreglas el problema de "preguntas frecuentes" pero desmadras todo el menú al pasar con el ratón por encima ¿has comprobado lo que hace ahora? :ambivalence:

lo del margin del ul... ¿a que se debe?

gracias por tu interés :encouragement:

No te entendí :welcoming:

Xanina · 16 May 2014

kanikase dijo:
No te entendí :welcoming:

después de poner el float:left; pasa el ratón por encima de las opciones de menú, sobre todo por encima de la opción de "blog" y verás lo que hace :ambivalence:

gracias de nuevo por estar ahí

hugo1 · 16 May 2014

Hola, prueba con display: block

HTML:

nav ul li a:hover, nav ul ul.acordeon li:hover {
  background: rgba(22,70,136,1);
  padding: 5px 10px;
  color: pink;
  display: block;
}

Jxit3 · 16 May 2014

display: block;

lo mas fácil!

OLMID · 17 May 2014

Tenemos este css

Insertar CODE, HTML o PHP:

nav ul li a, nav ul li label { 
    font-family: kavoon; 
    font-size: 1.1em;
    color: rgba(22,70,136,1); 
    /*text-transform: uppercase;*/
} 
nav ul li a:hover, nav ul ul.acordeon li:hover {
    background: rgba(22,70,136,1);
    padding: 5px 10px;
    color: pink;
}

Prueba reemplazándolo por este

Insertar CODE, HTML o PHP:

nav ul li a, nav ul li label { 
	font-family: kavoon; 
	font-size: 1.1em; 
	display:block; 
	padding: 3px 5px;
	color: rgba(22,70,136,1); 
	/*text-transform: uppercase;*/
} 
nav ul li a:hover, nav ul ul.acordeon li:hover {
	background: rgba(22,70,136,1);
	color: pink;
}

Saludos

Xanina · 17 May 2014

perfecto!! entre unos y otros lo habéis conseguido!! YA ESTÁ SOLUCIONADO!!! :encouragement:

8:

8:

la respuesta de OLMID no dejó lugar a dudas :encouragement:

muchas gracias a todos !!