CSS Liste

[Lowterm]

Hallo Zusammen,

ich habe folgendes Problem mit einer Liste und hover-Background. Meine Liste sieht wie folgt aus:

a.menu-text { color:black; }

.list {
	list-style-type: none;
	cursor: pointer;
    color: white;
    padding: 5px 0;
} 

.listContainer:hover {
    background-color: lightgray;
}

.mymenu {
	display: none;
	position: absolute;
	top: 18px;
	left: 10px;
    border-radius: 5px;
    z-index:10;
}

.bg-white {
  background-color: white;
  max-width: 200px;
  min-width: 200px;
  max-height: 125px;
  min-height: 50px;
  overflow-y:auto;
  padding: 0px 10px;
}


<div class="mymenu bg-white">
   <ul class="list">
     <li class="listContainer">
       <a class="menu-text">aaaaaaa</a>
       <a class="menu-text">bbbbbb</a>
       <a class="menu-text">ccccccc</a>
       <a class="menu-text">dddddd</a>
     </li>
   </ul> 
</div>

Hier öffnet sich ein Popupmenu beim hover. Wenn man mit der Maus über einen Link geht, bekommt der Link einen grauen Hintergrund, der so bereit ist wie die li-Elemente. Links und rechts habe ich wegen "padding: 0px 10px;" bei "bg-white"-Klasse einen weißen Rand von 10px. Ich möchte aber erreichen, dass der Hintergrund bei hover genau so bereist ist, wie das div-Element drum herum. Das heißt, dass bei hover die 10px, sozusagen, überschrieben werden muss.

Gruß