ссылка переходит при наведении Google Chrome и Safari

Question

Попытка создать вертикальное раскрывающееся меню исключительно с помощью html / css.

Насколько я могу видеть, код достаточно чистый, и хорошо работает в ff, то есть (не 6 ofc), и в Operaхотя в Google Chrome и Safari "toplink" переходит влево при наведении курсора.

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

, кажется, я слишком спешу спрашивать здесь.

добавление #topmenu ul li a {display: block}, казалось, добилось цели, хотя и не совсем уверен, почему.

любые объяснения будутценится, в противном случае надеюсь, что это полезно для других!