J'ai un problème, je ne sais pas quel est le problème avec le menu de survol mais il disparaît trop vite

<div class="dropdown">
                        <li class="nav-item log-main">
                            <a href="#" class="nav-link" data-toggle="dropdown">Member</a>
                            <ul class=" dropdown-menu log">
                                <li><a href="sign_in.html" class="dropdown-item">Sign up</a></li>
                                <li><a href="log_in.html" class="dropdown-item">Log in</a></li>
                            </ul>
                        </li>
                    </div>

Css:

.navbar .nav-item ul.log{
display: none;
list-style-type:none;
}
.navbar .dropdown-menu:hover ul.log{
    display: block;
}
.log a{
    color:var(--main-text-color);
    font-family:var(--main-text-font);
    font-size: 24px;
}
0
Quang nGUYEN 3 sept. 2020 à 06:08

2 réponses

Meilleure réponse

Vous devez utiliser :hover pseudo-classe sur .log-main:hover pour afficher le prochain ul qui sera .dropdown-menu

Démo en direct:

.navbar .nav-item ul.log {
  display: none;
  list-style-type: none;
}

.log-main:hover .dropdown-menu {
  display: block;
  margin-top: 0;
}

.log a {
  color: var(--main-text-color);
  font-family: var(--main-text-font);
  font-size: 24px;
}
<!-- Latest compiled and minified CSS -->
<link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/4.5.2/css/bootstrap.min.css">
<div class="dropdown">
  <li class="nav-item log-main">
    <a href="#" class="nav-link" data-toggle="dropdown">Member</a>
    <ul class="dropdown-menu log">
      <li><a href="sign_in.html" class="dropdown-item">Sign up</a></li>
      <li><a href="log_in.html" class="dropdown-item">Log in</a></li>
    </ul>
  </li>
</div>
1
Always Helping 3 sept. 2020 à 03:26

Vous devez ajouter un survol à l'élément visible et à la liste déroulante masquée.

.dropdown:hover .dropdown-menu,
.dropdown .dropdown-menu:hover{
  display: block;
  position: absolute;
}
<link href="https://stackpath.bootstrapcdn.com/bootstrap/4.5.2/css/bootstrap.min.css" rel="stylesheet"/>
<nav class="navbar navbar-expand-lg navbar-light bg-light">
  <a class="navbar-brand" href="#">Navbar</a>

  <ul class="navbar-nav">

    <li class="nav-item dropdown">
      <a class="nav-link dropdown-toggle" href="#" id="navbarDropdownMenuLink" role="button" data-toggle="dropdown" aria-haspopup="true" aria-expanded="false">
          Dropdown link
        </a>
      <div class="dropdown-menu" aria-labelledby="navbarDropdownMenuLink">
        <a class="dropdown-item" href="#">Action</a>
        <a class="dropdown-item" href="#">Another action</a>
        <a class="dropdown-item" href="#">Something else here</a>
      </div>
    </li>
  </ul>

</nav>
1
epascarello 3 sept. 2020 à 03:23