Surlignage texte Menu déroulant lors du hover

Bonjour,

J'ai un probleme avec mon menu deroulant lors du hover.
Le principe est simple, j'ai un menu déroulant standard, sans fioritures.
Ce que je voudrais c'est que lorsque du survol d'une catégorie; le background se limite uniquement à la largeur et à la hauteur du texte.
Or impossible d'y arriver. J'arrive a eventuellement a y arriver en largeur (de maniere pas tres propres) mais impossible au niveau de la hauteur. Il y a toujours un espace pas tres jolie sur entre le haut de la police et le haut du background.

Voici ce que cela donne:
Ce que j'ai :
http://i.stack.imgur.com/11sCH.png

Ce que j'aimerais avoir:
http://i.stack.imgur.com/JmVJW.png

Vous trouverez ci joint mon code html

<div id="menu">
                    <ul id="MenuDeroulant">
                        <li style="margin-left:-10px;"><a href="#" style="">Main categorie</a>
                            <ul>            
                                <li><a href="" >Subcat 1</a></li>
                                <li><a href="" >Subcat 2</a></li>

                            </ul>
                        </li>
                    </ul>
</div>

Et mon code html:

 #MenuDeroulant
{
    margin: 0;
    padding: 0
}
#MenuDeroulant li
{    
    float: left;
    list-style: none;
}
#MenuDeroulant li a
{    
    display: block;
    padding: 0px 0px;
    text-decoration: none;
    color: #000; 
    white-space: nowrap;
    text-align:center;
}

#MenuDeroulant li a:hover
{    
    background: #000;
    color: #FFF;
} 

#MenuDeroulant li ul
{   visibility: hidden;
    padding: 0px 0px;
}

#MenuDeroulant li ul li
{    
    float: none;
    display: inline;
}

#MenuDeroulant li ul li a
{    
width: auto;
padding: 0px 0px;
} 

#MenuDeroulant li ul li a:hover
{    
background: #0000;
padding: 0px 0px;
} 

En vous remerciant pour votre aide;

Anselme