3

Estoy haciendo un menú de tipo dropdown para mi aplicación. El caso es que, al hacer el hover sobre el icono de dropdown, sólo puedo hacer hover a los dos primeros elementos. Después de eso, se cierra el menú de dropdown. ¿Cómo podría arreglarlo?

Código de la página de usuario:

/* Vars file import */

 :root {
  --header-bg-color: #272d2d;
  --formBtn-bg-color: #4CAF50;
  --formRegister-bg-color: #4F7CAC;
  --navBar-links-color: #f2f2f2;
}


/***************************  GLOBAL STYLES ***************************/

body {
  height: 100%;
}


/***************************  GLOBAL STYLES ***************************/


/**************************  NAVIGATION BAR  **************************/


/* Navbar container */

.navbar {
  overflow: hidden;
  position: fixed;
  /* Set the navbar to fixed position */
  top: 0;
  /* Position the navbar at the top of the page */
  left: 0;
  width: 100%;
  /* Full width */
  height: 80px;
  background-color: #272d2d;
}


/* Links inside the navbar */

.navbar a {
  float: right;
  font-size: 16px;
  color: white;
  text-align: center;
  height: auto;
  padding: 14px 16px;
  text-decoration: none;
}


/* The dropdown container */

.dropdown {
  float: left;
  overflow: hidden;
}


/* Dropdown button */

.dropdown .dropbtn {
  font-size: 16px;
  border: none;
  outline: none;
  color: white;
  padding: 14px 16px;
  background-color: inherit;
  font-family: inherit;
  /* Important for vertical align on mobile phones */
  margin: 0;
  /* Important for vertical align on mobile phones */
}


/* Add an effect to navbar links on hover */

.navbar a:hover,
.dropdown:hover .dropbtn {
  opacity: 0.5;
}


/* Dropdown content (hidden by default) */

.dropdown-content {
  display: none;
  position: fixed;
  background-color: #f9f9f9;
  min-width: 200px;
  box-shadow: 0px 8px 16px 0px rgba(0, 0, 0, 0.2);
  z-index: 1;
}


/* Links inside the dropdown */

.dropdown-content a {
  float: none;
  color: black;
  padding: 12px 16px;
  text-decoration: none;
  display: block;
  text-align: left;
}


/* Add a grey background color to dropdown links on hover */

.dropdown-content a:hover {
  background-color: #ddd;
}


/* Show the dropdown menu on hover */

.dropdown:hover .dropdown-content {
  display: block;
}

.dropdownMenuIcon,
.logoutMenuIcon,
.homeIcon {
  width: 45px;
  height: auto;
}

.dropdownMenuIcon:hover {
  background: url('../resources/icons/menu-black.png');
}

.logoutMenuIcon:hover {
  background: url('../resources/icons/logout-black.png');
}

.homeIcon:hover {
  background: url('../resources/icons/home-black.png');
}


/**************************  NAVIGATION BAR  **************************/


/************************** BODY CONTENT ***************************/

.bodyContainer {
  width: 100%;
  height: 60%;
  left: 0;
  margin-top: 8%;
  position: absolute;
}

.formTitle {
  text-align: center;
}

.formContainer {
  width: 25%;
  height: auto;
  margin-left: auto;
  margin-right: auto;
}


/* Full-width inputs */

input[type=email],
input[type=password] {
  width: 100%;
  padding: 12px 20px;
  margin: 8px 0;
  display: inline-block;
  border: 1px solid #ccc;
  box-sizing: border-box;
}


/* Set a style for all buttons */

button {
  background-color: var(--formBtn-bg-color);
  color: white;
  padding: 14px 20px;
  margin: 8px 0;
  border: none;
  cursor: pointer;
  width: 50%;
}


/* Add a hover effect for buttons */

button:hover {
  opacity: 0.8;
}

.labelText {
  font-weight: bold;
}

#btnLogin {
  float: right;
  width: 50%;
}

#error {
  color: red;
  font-size: 1.2em;
  text-align: center;
}


/************************** BODY CONTENT ***************************/


/* TODO mover esto a otro archivo?? */

#userGreet {
  text-align: center;
}

.hiddenContent {
  display: inline-block;
  color: red;
}
<!DOCTYPE html>
<html lang="en" dir="ltr">

<head>
  <!-- CSS imports -->
  <meta name="viewport" content="width=device-width, initial-scale=1">
  <link rel="stylesheet" href="../css/main.css" />
  <!-- JQuery include -->
  <script type="text/javascript" src="../js/jquery-3.3.1.min.js"></script>
  <!-- <script type="text/javascript" src="js/loginForm.js"></script> -->
  <meta charset="utf-8">
  <title>User panel</title>
</head>

<body>
  <!-- Navigation Bar content -->
  <div class="navbar">
    <div class="dropdown">
      <button class="dropbtn"><img src="https://placehold.it/45x45/" alt="Menu Icon" class="dropdownMenuIcon"></button>
      <div class="dropdown-content">
        <a href="#">Create a new user</a>
        <a href="#">Edit user</a>
        <a href="#">Link 3</a>
        <a href="#">Edit user</a>
        <a href="#">Link 3</a>
        <a href="#">Edit user</a>
        <a href="#">Link 3</a>
      </div>
    </div>
    <a class="navBarElement" href="../index.php?logOut=true"><img class="logoutMenuIcon" src="../resources/icons/logout.png" alt=""></a>
  </div>
  <!-- Body content -->
  <div class="bodyContainer">
    <div id='userGreet'>
      <h3>Welcome, Nombre Apellido</h3>
    </div>
  </div>
</body>

</html>

1

2 respuestas 2

3

Acabo de encontrar la solución.

El contnedor del body tenía un position:absolute, lo que hacía que los elementos del menú de navegación no pudieran ser correctamente seleccionados.

1

La clase bodyContainer efectivamente tiene un absolute que no puedas acceder correctamente al menú, cambiándolo como tu mismo has visto a position: relative soluciones este problema. Pero creo, si me permites el apunte, que además ya que tu menú es fixed puedes añadirle un z-index que lo posicione por delante del resto de elemento de la página, ya que supongo que la intención es que siempre quede accesible al usuario y por tanto debe mostrarse siempre en primer plano. Con esto en realidad no tendrías ni que cambiar el position: absolute del bodyContainer:

.navbar {
    overflow: hidden;
    position: fixed;
    top: 0;
    left: 0;
    width: 100%;
    height: 80px;
    background-color: #272d2d;
    z-index: 99999; /*por ejemplo*/
}

Espero haberte podido ser de ayuda. Un saludo

Tu Respuesta

By clicking “Publica tu respuesta”, you agree to our terms of service and acknowledge you have read our privacy policy.

¿No es la respuesta que buscas? Examina otras preguntas con la etiqueta o formula tu propia pregunta.