title: dropdown menu disappear when hover to dropdown item
body: <p>Can you help me with my dropdown menu disappearing when I hover to its item? I am doing my best looking for a solution but I got no luck. I must have something missing in my css.</p>
  <p>Here's my code</p>
  <p><div class="snippet" data-lang="js" data-hide="false" data-console="true" data-babel="false">
  <div class="snippet-code">
  <pre class="snippet-code-css lang-css prettyprint-override"><code>      .navbar .nav-item:hover .nav-link{ color: #fff;  }
        .navbar .nav-item:hover .dropdown-menu{ 
          display: block;
        }
        .navbar .nav-item .dropdown-menu{ margin-top:0; }
      
      .dropdown-menu {
        margin-top: 0;
      }
      
      .navbar .nav-item:not(:last-child) {
        margin-right: 35px;
      }
      
      .dropdown-toggle::after {
        transition: transform 0.15s linear;
      }
      
      .show.dropdown .dropdown-toggle::after {
        transform: translateY(3px);
      }</code></pre>
  <pre class="snippet-code-html lang-html prettyprint-override"><code>    &lt;section class="w3l-bootstrap-header"&gt;
        &lt;nav class="navbar navbar-expand-lg navbar-light py-lg-2 py-2"&gt;
          &lt;div class="container"&gt;
            &lt;a class="navbar-brand" href="index.html"&gt;
             
            &lt;/a&gt;
            &lt;button class="navbar-toggler" type="button" data-toggle="collapse" data-target="#navbarSupportedContent"
              aria-controls="navbarSupportedContent" aria-expanded="false" aria-label="Toggle navigation"&gt;
              &lt;span class="navbar-toggler-icon fa fa-bars"&gt;&lt;/span&gt;
            &lt;/button&gt;
      
            &lt;div class="collapse navbar-collapse" id="navbarSupportedContent"&gt;
              &lt;ul class="navbar-nav mx-auto"&gt;
                &lt;li class="nav-item"&gt;
                  &lt;a class="nav-link" href="index.html"&gt;Home&lt;/a&gt;
                &lt;/li&gt;
                &lt;li class="nav-item"&gt;
                  &lt;a class="nav-link" href="about.html"&gt;About&lt;/a&gt;
                &lt;/li&gt;
                &lt;li class="nav-item dropdown"&gt;
                  &lt;a class="nav-link dropdown-toggle" href="#" id="navbarDropdown1" role="button" data-toggle="dropdown" aria-haspopup="true" aria-expanded="false"&gt;Projects&lt;/a&gt;
                  &lt;div class="dropdown-menu" aria-labelledby="navbarDropdown1"&gt;
                    &lt;a class="dropdown-item" href="#"&gt;Completed&lt;/a&gt;
                    &lt;a class="dropdown-item" href="#"&gt;On Going&lt;/a&gt;
                  &lt;/div&gt;
                &lt;/li&gt;
                &lt;li class="nav-item"&gt;
                  &lt;a class="nav-link" href="services.html"&gt;Services&lt;/a&gt;
                &lt;/li&gt;
                &lt;li class="nav-item"&gt;
                  &lt;a class="nav-link" href="contact.html"&gt;Contact&lt;/a&gt;
                &lt;/li&gt;
              &lt;/ul&gt;
              
            &lt;/div&gt;
          &lt;/div&gt;
        &lt;/nav&gt;
      &lt;/section&gt;</code></pre>
  </div>
  </div>
  </p>
  <p>Hope you can help me. Thanks a lot!</p>
  <p>God bless!</p>