Foros del Web » Creando para Internet » CSS »

como acotar el alto del background en dropdown menu

Estas en el tema de como acotar el alto del background en dropdown menu en el foro de CSS en Foros del Web. Tengo un menu desplegable, y quiero poder acotar la altura del background de los items del desplegable en hover es decir, la pastilla que aparece ...
  #1 (permalink)  
Antiguo 10/09/2014, 09:57
 
Fecha de Ingreso: septiembre-2013
Mensajes: 60
Antigüedad: 8 años, 10 meses
Puntos: 1
como acotar el alto del background en dropdown menu

Tengo un menu desplegable, y quiero poder acotar la altura del background de los items del desplegable en hover

es decir, la pastilla que aparece al pasar el raton por los descendientes del menu.

Este el el codigo

http://jsfiddle.net/jakijem/kdbaqorz/

¿Como puedo darle el height a solo la pastilla de los subitems (descendientes)?
  #2 (permalink)  
Antiguo 11/09/2014, 05:49
Avatar de webosiris
Moderador egiptólogo
 
Fecha de Ingreso: febrero-2002
Ubicación: Luxor, Egipto
Mensajes: 10.725
Antigüedad: 20 años, 5 meses
Puntos: 998
Respuesta: como acotar el alto del background en dropdown menu

creo que te equivocastes de jsfiddle...
__________________
Pasamos tus PSD a HTML

Pobre del que lo sabe todo, porque no tiene nada más que aprender ni razón para vivir. -
  #3 (permalink)  
Antiguo 11/09/2014, 06:10
 
Fecha de Ingreso: septiembre-2013
Mensajes: 60
Antigüedad: 8 años, 10 meses
Puntos: 1
Pregunta Respuesta: como acotar el alto del background en dropdown menu

Cita:
Iniciado por webosiris Ver Mensaje
creo que te equivocastes de jsfiddle...
es verdad, perdon, creia que lo habia guardado encima, este creo que si que es el link correcto:

[URL="http://jsfiddle.net/jakijem/aamxxm4a/"]http://jsfiddle.net/jakijem/aamxxm4a/[/URL]

PS: por cierto, ¿porqué me aparece la etiqueta -noparse- inhabilitando el enlace?
  #4 (permalink)  
Antiguo 19/09/2014, 08:54
 
Fecha de Ingreso: septiembre-2013
Mensajes: 60
Antigüedad: 8 años, 10 meses
Puntos: 1
Pregunta Respuesta: como acotar el alto del background en dropdown menu

lo pongo aqui a ver si asi alguien sabe como hacerlo:

Código HTML:
Ver original
  1. <nav id="menu">
  2.         <ul>
  3.           <li><a href="">ITEM 1</a></li>
  4.           <li><a href="">ITEM 2</a></li>
  5.           <li><a href="">ITEM 3</a></li>
  6.           <li><a href="">ITEM 4</a></li>
  7.           <li><a href="">ITEM 5</a>
  8.             <ul>
  9.               <li><a href="">Sub-Item 1</a></li>
  10.               <li><a href="">Sub-Item 2</a></li>
  11.               <li><a href="">Sub-Item 3</a></li>
  12.             </ul>
  13.           </li>
  14.         </ul>
  15.       </nav>

Código CSS:
Ver original
  1. /* menu principal dropdown*/
  2.  
  3. nav#menu ul {
  4.     color:#000;
  5. padding:0;
  6.     margin:0;
  7.     list-style: none;
  8.     position: relative;
  9.     display:block;
  10.     }
  11.  
  12. nav#menu ul li {
  13.     float:left;
  14.     display:list-item;
  15.     list-style: none;
  16.     }
  17.  
  18. nav#menu ul li a {
  19.     display:block;
  20.     font-size:14px;
  21.     text-decoration:none;
  22.     font-family: "Arial Narrow", sans-serif;
  23. }
  24.  
  25. nav#menu ul li a:hover {
  26.     font-family: 'Arial Narrow';
  27.     font-weight: bold;
  28.     background-color: #000;
  29.     color: #fff;
  30. }
  31.  
  32. /* Estilos del dropdown */
  33.  
  34. /* Oculta Dropdowns por defecto */
  35. nav#menu ul ul {
  36.     display: none;
  37.     position: absolute;
  38.     top: 24px;
  39. }
  40.  
  41. /* Muestra Dropdowns on Hover */
  42. nav#menu ul li:hover > ul {
  43.     display:list-item;
  44.     padding:0;
  45.     margin:0;
  46. }
  47.  
  48. /* primer descendiente Dropdown */
  49. nav#menu ul ul li {
  50.     width:80px;
  51.     height: 20px;
  52.     float:none;
  53.     position: relative;
  54.     border-bottom:none;
  55.  
  56. }
  57.  
  58. /* Segundo, tercero y siguientes descendientes */
  59. nav#menu ul ul ul li {
  60.     position: absolute relative;
  61.     top:-24px;
  62.     left:170px;
  63. }
  64. /* flechitas del elemento que tiene dropdown */
  65. nav#menu li > a:after { content: ' »'; }
  66. nav#menu li > a:only-child:after { content: ''; }
  #5 (permalink)  
Antiguo 20/09/2014, 08:40
 
Fecha de Ingreso: julio-2014
Mensajes: 179
Antigüedad: 8 años
Puntos: 26
Respuesta: como acotar el alto del background en dropdown menu

No sé si entendí bien, pero tal vez lo que quieres hacer esta en la linea 38 top: 24px;

Reducelo a tal vez 18 o 15 pixeles, espero sea lo que necesitas!

Saludos
__________________
Si haces las cosas como nadie las ha hecho, cobralas bien, si las vas a hacer como todos las han hecho, cobralas bien!!
MecanizandoWeb.com
  #6 (permalink)  
Antiguo 20/09/2014, 09:06
 
Fecha de Ingreso: septiembre-2013
Mensajes: 60
Antigüedad: 8 años, 10 meses
Puntos: 1
Respuesta: como acotar el alto del background en dropdown menu

Cita:
Iniciado por DesgraciadoGabo Ver Mensaje
No sé si entendí bien, pero tal vez lo que quieres hacer esta en la linea 38 top: 24px;

Reducelo a tal vez 18 o 15 pixeles, espero sea lo que necesitas!

Saludos
No, eso lo que hace es despegar mas o menos el menu desplegable (subitem1, subitem2, etc) de su ascendiente (Item5), es decir, la columna de subitems del Item5, pero lo que yo quiero es poder controlar el alto del background de los subitems,

Etiquetas: alto, background, dropdown, hover
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 12:32.