Verán.. tengo un menú en la parte superior de mi página. Todas las opciones del menú, nada más pincharlas te envía a una página. Excepto una.
La idea es que al pinchar en esa opción del menú aparezca un submenu justo debajo de esa parte y si pincho en una opción de ella debo ir a la página en concreto. Pero, si pincho en alguna otra parte de la página, debería ocultarse.
¿Saben como puedo hacer?
Miro por google, pero... no sé que criterios de búsqueda poner para encontrar lo que quiero exactamente.
Espero haberme explicado y que puedan ayudarme, ya que con esta tontería estoy algo atascado en mi trabajo.
Gracias por vuestro tiempo.
Actualmente tengo puesto lo siguiente (Pongo lo relevante):
Código:
Se me muestra, pero... no sé por qué queda muy por debajo de donde quiero colocarla justamente, es decir, como si no fuera capaz de ponerse encima de las demás capas... y luego, no consigo que se oculte al pinchar en cualquier lado de la página. Uso bootstrap, por si eso puede ayudarles a decirme por que no queda justo debajo de mi botón de menu, que está dentro de un "nav-bar" <script>
$('#imgBtnConfiguracion').click(function () {
$('#menuPersonal').attr("style", "visibility: visible");
});
</script>
<div class="container">
<div class="row">
<div class="col-12">
<table class="table" style="border-collapse: collapse; border-spacing: 0; width:100%;">
<tbody style="padding:0px">
<tr>
<td>
<div>
<img src='imagen.png' alt='Configuracion' title='Configuracion' class='img-responsive' style='cursor:pointer' id="imgBtnConfiguracion" />
</div>
</td>
</tr>
</tbody>
</table>
</div>
</div>
</div>
<div id="menuPersonal" style="position: absolute; left: 160px; top: 160px; z-index: 5; visibility:collapse">
<div class="list-group">
<a href="#" class="list-group-item">Mencionados</a>
<a href="#" class="list-group-item">RTs</a>
<a href="#" class="list-group-item">Klout</a>
<a href="#" class="list-group-item">Seguidores</a>
</div>
</div>
