title: How to create smooth transition on nav
body: <p>I have a working navigation, but I want the transition between switching dropdown menus to be smoother. Right now, there is an uncomfortable 'blinking' when you hover between the various main menu links. I know it is caused because of the transition time, but I'm not sure how to fix it. I want the transition to be seamless, as if only the dropdown items themselves are changing (not the background).</p>
  
  <p>Below is my code, and here is a link to a CodePen (<a href="https://codepen.io/zp12345/pen/mQzvXr" rel="nofollow noreferrer">https://codepen.io/zp12345/pen/mQzvXr</a>). Any help is appreciated. Thanks!</p>
  
  <p><strong>HTML</strong></p>
  
  <pre><code>&lt;div class="nav-links"&gt;
    &lt;ul class="nav-primary" id="nav-primary"&gt;
      &lt;li class="nav-item-top"&gt;
        &lt;a href="#link"&gt;
          &lt;span class="nav-item-label"&gt;Item One&lt;/span&gt;
        &lt;/a&gt;
        &lt;ul class="nav-dropdown"&gt;
          &lt;li class="nav-dropdown-item"&gt;
            &lt;a href="#link"&gt;
              &lt;h5&gt;1.1&lt;/h5&gt;
            &lt;/a&gt;
          &lt;/li&gt;
          &lt;li class="nav-dropdown-item"&gt;
            &lt;a href="#link"&gt;
              &lt;h5&gt;1.2&lt;/h5&gt;
            &lt;/a&gt;
          &lt;/li&gt;
        &lt;/ul&gt;
      &lt;/li&gt;
      &lt;li class="nav-item-top"&gt;
        &lt;a href="#link"&gt;
          &lt;span class="nav-item-label"&gt;Item Two&lt;/span&gt;
        &lt;/a&gt;
        &lt;ul class="nav-dropdown"&gt;
          &lt;li class="nav-dropdown-item"&gt;
            &lt;a href="#link"&gt;
              &lt;h5&gt;2.1&lt;/h5&gt;
            &lt;/a&gt;
          &lt;/li&gt;
          &lt;li class="nav-dropdown-item"&gt;
            &lt;a href="#link"&gt;
              &lt;h5&gt;2.2&lt;/h5&gt;
            &lt;/a&gt;
          &lt;/li&gt;
        &lt;/ul&gt;
      &lt;/li&gt;
      &lt;li class="nav-item-top"&gt;
        &lt;a href="#link"&gt;
          &lt;span class="nav-item-label"&gt;Item Three&lt;/span&gt;
        &lt;/a&gt;
        &lt;ul class="nav-dropdown"&gt;
          &lt;li class="nav-dropdown-item"&gt;
            &lt;a href="#link"&gt;
              &lt;h5&gt;3.1&lt;/h5&gt;
            &lt;/a&gt;
          &lt;/li&gt;
          &lt;li class="nav-dropdown-item"&gt;
            &lt;a href="#link"&gt;
              &lt;h5&gt;3.2&lt;/h5&gt;
            &lt;/a&gt;
          &lt;/li&gt;
        &lt;/ul&gt;
      &lt;/li&gt;
      &lt;li class="nav-item-top"&gt;
        &lt;a href="#link"&gt;
          &lt;span class="nav-item-label"&gt;Item Four&lt;/span&gt;
        &lt;/a&gt;
        &lt;ul class="nav-dropdown"&gt;
          &lt;li class="nav-dropdown-item"&gt;
            &lt;a href="#link"&gt;
              &lt;h5&gt;4.1&lt;/h5&gt;
            &lt;/a&gt;
          &lt;/li&gt;
        &lt;/ul&gt;
      &lt;/li&gt;
    &lt;/ul&gt;
  &lt;/div&gt;
  </code></pre>
  
  <p><strong>SCSS</strong></p>
  
  <pre><code>.nav-primary {
    display: flex;
    flex-grow: 1; 
    justify-content: center;
    list-style-type: none;
    padding-left: 0;
  }
  .nav-item-top .nav-item-label {
    color: #383838;
    font-size: 18px;
    padding: 0 24px;
    cursor: pointer;
  }
  .nav-item-top {
    &amp;:hover {
      .nav-item-label {
        color: #319644;
      }
      .nav-dropdown {
        visibility: visible;
        opacity: 1;
        padding: 16px 0;
      }
    }
  }
  .nav-dropdown {
    width: 100%;
    left: 0;
    position: fixed;
    top: 60px;
    transition: .2s;
    opacity: 0;
    z-index: 3;
    padding: 0;
    background-color: #133751;
    color: #133751;
    display: flex;
    align-items: center;
    justify-content: center;
    visibility: hidden;
    list-style-type: none;
    .nav-dropdown-item {
      transition: .2s;
      padding: 12px 24px;
      text-align: center;
      color: #fff;
      cursor: pointer!important;
    }
    h5 {
      color: #fff;
      margin: 0;
      text-transform: none;
      font-size: 16px;
    }
  }
  .nav-dropdown-item {
    a {
      transition: all 0.2s;
      text-decoration: none;
    }
  }
  </code></pre>