La solución (una de ellas, claro
):
La he sacado de esta página (
http://www.hedgerwow.com/360/dhtml/u..._menu/demo.php) y la he adaptado (y reducido) a mis necesidades. Os envío hasta los comentarios que he necesitado para aclarame con el código por si a alguien le pueden ayudar:
Código PHP:
<!doctype html public "-//w3c//dtd html 4.01//en" "http://www.w3.org/tr/html4/strict.dtd">
<html>
<head>
<meta http-equiv=content-type content="text/html; charset=utf-8">
<title> CSS Dropdown Menu </title>
<style>
body {
font-family: verdana, arial, "sans serif";
font-size: 13px;
}
/* Esto quita las bolitas de los elementos ul y li y los pega a la izquierda */
.dropdownmenu ul {
padding: 0;
margin: 0;
list-style: none;
}
.dropdownmenu li {
/* Esto hace que las opciones salgan en su sitio */
position: relative;
/* Ancho y alto del botón. 0 vertical para que no nos separe las líneas y un poco de anchura para que
no haga falta estar fino con el ratón */
padding: 0em 0.5em;
}
.dropdownmenu li li {
/* Esto es para que la opción ocupe todo el ancho, si no, cogeríamos el 0.5 de arriba y dejaría un espacio en blanco muy feo */
padding: 0;
}
/* Estilo de las opciones de menú (los links) */
.dropdownmenu li li a {
/* Esto hace que las opciones no se solapen */
display: block;
padding: 2px 4px;
text-decoration: none;
color: #444444;
border-top: 1px solid #444444;
}
/* Estilo cuando pasamos el ratón sobre las opciones (links)*/
.dropdownmenu li li a:hover {
background: #E49993;
}
/* Sin esto no hay desplegable */
.dropdownmenu li:hover>ul {
/* Ancho de las opciones */
width: 4.5em;
/* Esto muestra las opciones del menu. El important hace que prevalezca sobre otro display que pueda afectar a ese elemento */
display: block !important;
/* Hacemos que las opciones del menu salgan en primer plano */
z-index: 100;
}
/* Estilo de las opciones del menú */
.dropdownmenu li ul {
position: absolute;
left: 0px;
border: 1px solid #444444;
background: white;
/* Display none oculta las opciones del menú */
display: none;
padding: 0px;
}
/* Excepcion para que no salga la línea superior en la 1a opcion */
.linea {
border-top-width: 0px !important;
}
</style>
</head>
<body>
<h1>CSS Dropdown Menu</h1>
<table>
<tr>
<td>
Frederico
</td>
<td>
<div class="dropdownmenu">
<ul>
<li>
v
<ul>
<li><a class="linea" href="http://www.yahoo.com">Editar</a></li>
<li><a href="http://www.google.com">Borrar</a></li>
</ul>
</li>
</ul>
</div>
</td>
</tr>
<tr>
<td>
Manoli
</td>
<td>
<div class="dropdownmenu">
<ul>
<li>
v
<ul>
<li><a class="linea" href="http://www.yahoo.com">Editar</a></li>
<li><a href="http://www.google.com">Borrar</a></li>
</ul>
</li>
</ul>
</div>
</td>
</tr>
</table>
</body>
</html>
La idea de esto es tener unos elementos ocultos que sólo se muestren al pasar el ratón sobre las v (yo tenía una imagen, pero he puesto uves para que funciones con sólo copiar y pegar). La línea que contiene el meollo no la llego a entender del todo (.dropdownmenu li:hover>ul) pero eso lo preguntaré en el foro de CSS
Espero que esto le sirva de ayuda a alguien. Personalmete, he buscado en el google y me he encontrado exactamente el mismo problema varias veces y ninguna respuesta (excepto la de onmouseleave).
¡Mierda! Acabo de probar mi ejemplo en el explorer y no funciona
Menos mal que el original (el link está arriba) sí funciona, así que, tendré que ponerme otra vez con él hasta que encuentre en qué falla. Estoy harto de las incompatibilidades entre navegadores :-p
En fin, habrá que seguir currándoselo. ¡Un saludo a todos!
