Aktywne, pionowe menu ul li - problem z nawigacją

Witam, męczę się z prostym menu w css, które chciałbym oddzielić marginesem od głównego przycisku (screen: załącznik).
Wszystko jest ok. ale jak dodam margines to niestety menu znika zanim kursor pojawi się na rozwijanych przyciskach ? Znacie dobre rozwiązanie dla tego typu problemu ?

Tak, wrzuć swoje podmenu w kontener, ten kontener niech nie ma tła, i ma padding-top, nie margin. Dostosuj cssy do wprowadzonych zmian.

Dziękuję za zainteresowanie i pomoc.
No właśnie nie bardzo mam jak wlepić tam div'a, menu jest w postaci:

 
  <ul id="wg_cena">
                        <li><a href="">{l s="Okazje"}</a>
                        <ul>             
                            <a href=""><li>{l s='Imieniny'}</li></a>
                            <a href=""><li>{l s='Urodziny'}</li></a>
                        </ul>                      
                        </li>
 </ul>

Co to w ogóle jest za kod <a><li>...</li></a>?
I co za problem wstawić diva?

<ul id="wg_cena">
  <li><a href="">{l s="Okazje"}</a>
    <div>
      <ul>
        <li><a href="">{l s='Imieniny'}</a></li>
        <li><a href="">{l s='Urodziny'}</a></li>
      </ul>
    </div>
  </li>
</ul>

W przypadku Nie-HTML5 walidator będzie się pluł,
ALE rozważ fakt, że przejście na doctype HTML5 zapewne (o ile tworzysz dobry kod, hm?) będzie bezbolesne (tj. nie będzie żadnych błędów w walidatorze, choć chyba Ci to zwisa, skoro produkujesz <li> w <a>), a otworzy Ci możliwość używania nowych, fajnych tagów i innych nowych cudów. Nie ma powodu dla którego miałbyś trzymać się czegoś starego.

Rozumiem o co Ci chodzi, ale taki zapis o jakim mówisz:

<ul id="wg_cena">
  <li><a href="">{l s="Okazje"}</a>
    <div style="padding-top: 5px; background: none">
      <ul>
        <li><a href="">{l s='Imieniny'}</a></li>
        <li><a href="">{l s='Urodziny'}</a></li>
      </ul>
    </div>
  </li>
</ul>

powoduje, że powstaje zwykły zwykły padding top przycisku, którego oscylowanie i tak przejmuje: ul#wg_cena li.

Wstawiłem li w a href, ponieważ chciałem aby całe pole button'a było aktywne [a nie tylko aktywny tekst] -> wiem, że mogę nadać rozmiar dla ul#wg_cena ul li ale gdy walczę z wspomnianym problemem .. nie chce komplikować postaci kodu ... ;)

edit.
kombinowałem żeby wstawić pustego
ul#wg_ceny ul li:first-child {height:5px; background: none}
bądź z line-height ale wtedy narzucał wymiary i tak wszystkim pozostałym li ... .

Przede wszystkim wbij sobie do głowy - totalnie niepoprawny kod może spowodować, że przeglądarka po własnemu przerobi Ci kod HTML, żeby była w stanie to ogarnąć i wyświetlić. W tym przypadku faktycznie nie. Ale w trudniejszych przypadkach będziesz musiał śledzić DOM, zanim zaczniesz się zastanawiać dlaczego Twoje regułki CSS kompletnie nie działają jak chcesz.

Ogólnie wybacz, ale gdy przeczytałem te Twoje pomysły to.. zrezygnowałem. Masz gotowca, PROSZĘ naucz się coś z niego:
http://jsbin.com/eluzup/1/

(edit: nie oddaje to w pełni Twojego stylu, nie o to mi chodziło, żeby się do piksela zgadzało, tylko, żeby idea działała)

Dziękuję za podpowiedź i przydatne rady, które wbiję sobie raz na zawsze do głowy. Z bezradności i nerwów przychodzą mi różne pomysły do głowy, wybacz.

edit.
Podejrzewam, że IE tego "nie zrozumie" :/

Selektor > działa od IE7. W IE8 działa 100% poprawnie. Nie masz się więc czym przejmować, bo IE6-7 się już nie liczą i nawet nie zaprzątaj sobie tym głowy.