Mira, la cosa va mal desde el principio: no puedes poner dentro de un UL directamente otras cosas que no sean LI:
<ul class="menu">
<a href=#><li>Link 1</li></a>
Un UL siempre estará formado por LI's, y dentro de estos puede haber otras cosas, pero no fuera de ellos. En ese caso debería ser algo como:
<ul class="menu">
<li><a href=#>Link 1</a></li>
Echa un vistazo a
este sitio donde tienes varios ejemplos de menús desplegables sólo CSS que funcionan en todos los navegadores.