como acotar el alto del background en dropdown menu

[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: ''; }