Display submenu after mouse out

Question

would you people be able to help me out with a transition delay on mouse out? :D

My navbar has a dropdown-menu, but because there is a whitespace of several pixels between the main menu item and the submenu, on a mouse out the submenu disappears again if I don't move my mouse down quickly enough. I have been playing around with transition effects based on answers on other threads, but I just can't get it to work (because I do not really understand the logic - I usually learn through trial and error).

As such, would you people be able to help me out? I prefer a solution that focusses on transitions (instead of one that decreases the white-space), as I want to learn the transition skill for other web-design aspects as well. Hopefully, with that, I also understand better how these HTML structures actually work, so I can I re-use the basic concept for ideas.

NB: the menu-items change color upon hovering. The main CSS for that purpose is listed but I omitted the specific CSS for colors.

nav {
  display:flex;
  align-items:center;
  flex-direction:row;
  float:right;
  nav-right:auto;
  justify-content:space-between;
}

.btn.btn-primary {
  border: 0px;
    border-radius:0 !important;
    -webkit-border-radius:0 !important;
}

.btn.btn-primary:hover {

}

.dropdown-menu {
    border-radius:0 !important;
    -webkit-border-radius:0 !important;
}

.dropdown ul.dropdown-menu li a{
    border-radius:0 !important;
    -webkit-border-radius:0 !important;
}

.dropdown ul.dropdown-menu li a:hover{

}

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

<section>
  <header class="container">
    <div class="row">
      <nav class="navbar navbar-default navbar-fixed-top" style="background-color:snow;">
        <h2 class="col-md">
          <a class="nav" href="./index">Foundation</a>
        </h2>
        <nav class="navbar-right">
          <!-- make it into one block, or aligned block-->
          <div class="dropdown">
            <button class="btn btn-primary dropdown-toggle" type="button" data-toggle="dropdown">
                                Our mission </button>
            <ul class="dropdown-menu">
              <li>
                <a href="./Guidelines#Conservation">Natural resources</a>
              </li>
              <li>
                <a href="./Guidelines#Food">Access to food</a>
              </li>
              <li>
                <a href="./Guidelines#Health">Public health</a>
              </li>
            </ul>
          </div>
        </nav>
      </nav>
    </div>
  </header>
</section>

You can't transition the `display` property if that is what you are trying to do. — Paulie_D, Jun 18 '18 at 14:42
Also, it's not clear what the issue is - https://codepen.io/Paulie-D/pen/XYVWwY — Paulie_D, Jun 18 '18 at 14:45
https://stackoverflow.com/questions/10995165/what-is-the-opposite-of-hover-on-mouse-leave — nullqube, Jun 18 '18 at 15:00
Ah right, yeah, on a hover, the submenu drops down right (display: block). So I can't delay that transition effect? Thanks for providing the codepen example. If I move my mouse down too slowly there, the submenu disappears. Especially for slower users, this will be a problem. I am looking at the link nullqube provided now. But if I cant transition display block, I should do a set up with a 'visibility' property? — Paul Cudles, Jun 18 '18 at 15:25

score 0 · Answer 1 · answered Jun 18 '18 at 17:03

I think your issue isn't with the transition but the navbar itself. Are you using bootstrap by the way? In the following snippet I just linked BS to your code, and what I see is that the menu is clickable but it is really tricky to click on the submenus.

The btn btn-primary class more like for clickable menus or submit buttons, but you can still make it look like a button with a little bit of CSS. But for a dropdown menu I guess it's not very intuitive.

.btn.btn-primary {
  border: 0px;
  border-radius: 0 !important;
  -webkit-border-radius: 0 !important;
}

.dropdown-menu {
  border-radius: 0 !important;
  -webkit-border-radius: 0 !important;
}

<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script>
<html>

<head>
  <link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/css/bootstrap.min.css" integrity="sha384-BVYiiSIFeK1dGmJRAkycuHAHRg32OmUcww7on3RYdg4Va+PmSTsz/K68vbdEjh4u" crossorigin="anonymous">

  <!-- Optional theme -->
  <link rel="stylesheet" href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/css/bootstrap-theme.min.css" integrity="sha384-rHyoN1iRsVXV4nD0JutlnGaslCJuC7uwjduW9SVrLvRYooPp2bWYgmgJQIXwl/Sp" crossorigin="anonymous">

  <!-- Latest compiled and minified JavaScript -->
  <script src="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/js/bootstrap.min.js" integrity="sha384-Tc5IQib027qvyjSMfHjOMaLkfuWVxZxUPnCJA7l2mCWNIpG9mGCD8wGNIcPD7Txa" crossorigin="anonymous"></script>
</head>

<body>
  <nav class="navbar navbar-default navbar-fixed-top">
    <div class="container">
      <div class="navbar-header">
        <button type="button" class="navbar-toggle collapsed" data-toggle="collapse" data-target="#navbar" aria-expanded="false" aria-controls="navbar">
            <span class="sr-only">Toggle navigation</span>
            <span class="icon-bar"></span>
            <span class="icon-bar"></span>
            <span class="icon-bar"></span>
          </button>
        <a href="./index" class="navbar-brand">Foundation</a>
      </div>
      <div id="navbar" class="navbar-collapse collapse">
        <ul class="nav navbar-nav navbar-right">
          <li>
          <p class="navbar-btn">
                    <a href="#" class="btn btn-primary" data-toggle="dropdown">Our mission</a>
                </p>
          
            
          </li>
          <li class="dropdown">
                <a href="#" class="dropdown-toggle" data-toggle="dropdown" role="button">Dropdown <span class="caret"></span></a>
              <ul class="dropdown-menu">
              <li>
                <a href="./Guidelines#Conservation">Natural resources</a>
              </li>
              <li>
                <a href="./Guidelines#Food">Access to food</a>
              </li>
              <li>
                <a href="./Guidelines#Health">Public health</a>
              </li>
            </ul>
              </li>
        </ul>

      </div>
      <!--/.nav-collapse -->
    </div>
  </nav>
</body>

</html>

Display submenu after mouse out

1 Answers1