Tema: como acotar el alto del background en dropdown menu
Ver Mensaje Individual
  #4 (permalink)  
Antiguo 19/09/2014, 08:54
jakijem
 
Fecha de Ingreso: septiembre-2013
Mensajes: 60
Antigüedad: 10 años, 7 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: ''; }