como acotar el alto del background en dropdown menu

[jakijem]

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)?

[webosiris]

creo que te equivocastes de jsfiddle...

[jakijem]

Iniciado por webosiris

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?

[jakijem]

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

Código HTML:

<nav id="menu">
        <ul>
          <li><a href="">ITEM 1</a></li>
          <li><a href="">ITEM 2</a></li>
          <li><a href="">ITEM 3</a></li>
          <li><a href="">ITEM 4</a></li>
          <li><a href="">ITEM 5</a>
            <ul>
              <li><a href="">Sub-Item 1</a></li>
              <li><a href="">Sub-Item 2</a></li>
              <li><a href="">Sub-Item 3</a></li>
            </ul>
          </li>
        </ul>
      </nav>
 

Código CSS:

/* menu principal dropdown*/
 
nav#menu ul {
    color:#000;
padding:0;
    margin:0;
    list-style: none;
    position: relative;
    display:block;
    }
 
nav#menu ul li {
    float:left;
    display:list-item;
    list-style: none;
    }
 
nav#menu ul li a {
    display:block;
    font-size:14px;
    text-decoration:none;
    font-family: "Arial Narrow", sans-serif;
}
 
nav#menu ul li a:hover {
    font-family: 'Arial Narrow';
    font-weight: bold;
    background-color: #000;
    color: #fff;
}
 
/* Estilos del dropdown */
 
/* Oculta Dropdowns por defecto */
nav#menu ul ul {
    display: none;
    position: absolute;
    top: 24px;
}
 
/* Muestra Dropdowns on Hover */
nav#menu ul li:hover > ul {
    display:list-item;
    padding:0;
    margin:0;
}
 
/* primer descendiente Dropdown */
nav#menu ul ul li {
    width:80px;
    height: 20px;
    float:none;
    position: relative;
    border-bottom:none;
 
}
 
/* Segundo, tercero y siguientes descendientes */
nav#menu ul ul ul li {
    position: absolute relative;
    top:-24px;
    left:170px;
}
/* flechitas del elemento que tiene dropdown */
nav#menu li > a:after { content: ' »'; }
nav#menu li > a:only-child:after { content: ''; }
 

[DesgraciadoGabo]

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

[jakijem]

Iniciado por DesgraciadoGabo

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,