pseudoclases y pseudoelementos en chrome

[cristian_cena]

Hola gente, resulta que tengo un menu desplegable echo solo con css, y bien, lo tengo funcionando en FF y IE (6, 7 y 8).
El problema es que los enlaces (solo los enlaces lo demás funciona perfecto) no funcionan para Opera ni para Chrome.

Aqui les dejo el codigo tanto html como css, o bien pueden ver el ejemplo online aquí. El menu esta creado en base a este codigo de mikmoro :

Código HTML:

<div id="menu">
					<ul>
						<li class="nivel1 primera" tabindex="1"><span id="spanEmpresa" class="nivel1">Empresa </span>
						<!--[if IE]>
						<a href="#" class="nivel1ie">Empresa
							<table class="falsa">
								<tr>
									<td>	
										<![endif]-->
										<ul>
											<hr id="raya" noshade="noshade" height="2px">
											<li class="primera"><a href="inicioEmpresaInstitucional.html">Institucional</a></li>
											<li><a href="inicioEmpresaDatosComerciales.html">Datos Comerciales</a></li>
											<li><a href="inicioEmpresaDatosTecnicos.html">Datos Técnicos</a></li>
											<hr id="raya">
										</ul>
										<!--[if IE]>
									</td>
								</tr>
							</table>
						</a>
						<![endif]-->
						</li>
						<li class="nivel1" tabindex="2"><span id="spanProductos" class="nivel1">Productos</span>
						<!--[if IE]>
						<a href="#" class="nivel1ie">Productos
							<table class="falsa">
								<tr>
									<td>
										<![endif]-->
										<ul>
											<hr id="raya">
											<li class="primera"><a href="PRODUCTOS/productos.html">Líneas por Especie</a></li>
											<li><a href="PRODUCTOS/lineaNutricion/lineaNutrición.html">Línea Nutrición</a></li>
											<li><a href="PRODUCTOS/lineaSanidad/lineaSanidad.html">Línea Sanidad</a></li>
											<li><a href="PRODUCTOS/elaboradosPorPedido.html">Productos Especiales</a></li>
											<hr id="raya">
										</ul>
										<!--[if IE]>
									</td>
								</tr>
							</table>
						</a>
						<![endif]-->
						</li>
						<li class="nivel1" tabindex="3"><span class="nivel1"><a href="servicios.html">Servicios</a></span>
						</li>

						<li class="nivel1" tabindex="5"><span class="nivel1"><a href="contacto.php">CONTACTO</a></span>
						</li>
					</ul>
					</div><!--menu--> 

Código:

* { margin: 0px;
padding: 0px; outline: 0;
}
html, body { width: 100%;}
#menu {  
text-align: right;
position:relative;
z-index:1;
right:17px;
line-height:40px;
font-size:16px;
margin-left:50px;
}
#menu ul { list-style-type: none;
}
#menu ul li.nivel1 { 
width: 200px;
}
#menu ul li.primera { border-top: solid 1px #FFF;
}
#menu ul li a, #menu ul li span {
display: block;
text-decoration: none;
color: black;
background-color: white;
border-top: none;
padding:;
position: relative;
}

#menu ul li a:hover, #menu ul li span:hover {
font-weight:bold;
text-transform:uppercase;
}

a:active {
position: relative;
}
#menu ul li a:active {
background-color: #6CC;
color: gray;
position: relative;
}
#menu ul li span.nivel1 {
display: block;
}
#menu ul li:hover span.nivel1 {
cursor: pointer;
}
#menu ul li ul {
display: none;
}
#menu ul li a:hover ul, #menu ul li a:active ul {
display: block;
position: relative;
width: 200px; 
background-color: #6CC;
}
#menu ul li a:link:hover ul {
display: none;
}		
#menu ul li a:active:hover ul  {
display: block;
}
#menu ul li ul li a {
width: 200px;
padding: 6px 0px 8px 0px;
border: none;
border-top: solid 1px #fff;
background-color: white;
font-weight: normal;
color: gray;
}
#menu ul li ul li a:hover {
position: relative;
text-decoration:;
border-bottom: none;
color:gray;
text-transform:uppercase;
}
#menu ul li ul li.primera {
border-top: none;
}
table.falsa {
border-collapse:collapse;
border:0px;
float: left;
position: relative;
}
#menu ul li:focus ul, #menu ul li:active ul, #menu ul li a:active ul {
display: block;
position: relative;
width: 200px;
border: solid 1px #fff;
border-top: none;
color:gray;
}
#menu ul li:focus span, #menu ul li:active span, #menu ul li a:active {
background-color: white;
color: black;
text-transform:uppercase;
}

#raya{background-color:#D51920; height:2px; border:none; outline:none;}

es raro porque cuando pongo el mouse encima de los enlaces me muestra la ruta en la barra de estado del navegador, pero cuando hago click en ellos no me llevan a ningun lado.

Desde ya muchas gracias por su ayuda

p-d: el titulo "pseudoclases y pseudoelementos en chrome" lo puse porque puede ser que lo que no funcione del menu sea :active:hover. nose.

[minvallado]

Hola estoy teniendo un problema similar... queria saber si has encontrado una solucion

[cristian_cena]

Hola minvallado, en su momento opté por usar javascript en vez de solo css, usando algun plugin como este, hay varios para elegir de todos modos.

[minvallado]

Muchas graccias. La verdad es que en una primera version tenia script y estaba intentando quitarles.