lien saute sur hover google chrome et safari

Question

Essayer de créer un menu déroulant vertical purement avec html/css. Le codage est assez propre pour autant que je peux voir, et fonctionne bien en ff, c'est-à-dire (pas 6 ofc), et l'opéra sur google chrome et safari le "toplink" saute à gauche en stationnaire.

html:

<div id="topmenu"> 
<ul> 
    <li class="toplink"><a href="about.html">About</a> 
    <ul class="submenu"><li><a href="about2.html">About2</a></li> 
         <li><a href="about3.html">About3</a></li> 
    </ul> 
    </li> 
    <li class="toplink"><a href="anotherdropdown.html">About</a> 
    <ul class="submenu"><li><a href="about2.html">About2</a></li> 
      <li><a href="about3.html">About3</a></li> 
    </ul> 
    </li> 
</ul> 

css:

#topmenu ul {margin: 0; padding: 0; list-style: none; width: 100%; } 
#topmenu ul li {position: relative; float: left; display: inline; } 
#topmenu ul li ul {position: absolute; display: none; margin-top: 4px;} 
#topmenu ul li ul li {position: relative; clear: left; } 
#topmenu ul li:hover ul {display: block; } 

Answer 1

semble que j'étais trop Hastey demander ici. Ajouter #topmenu ul li a {display: block} a semblé faire l'affaire, mais pas tout à fait sûr pourquoi.

toutes les explications seraient appréciées, sinon espérons que cela soit utile aux autres!