link jumps on hover google chrome and safari

Question

Trying to create a vertical drop down menu purely with html/css.

the coding is quite clean as far as i can see, and works well in ff, ie (not 6 ofc), and opera though on google chrome and safari the "toplink" jumps to the left on hover.

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

seems i was too hastey asking here.

adding #topmenu ul li a {display: block} seemed to do the trick, though not quite sure why.

any explainations would be appreciated, otherwise hope this is of use to others!