title: Menu-Flickering from Dropdown (position absolute, visible after hover)
body: <p>i have a menu-flicker-problem and spend 3 hours investigating where this flicker is coming from - but i can't solve it.</p>
  
  <p>hover over the point "Career" and navigate with the mouse to the dropdownmenu to see the flickering.</p>
  
  <p>my current browser: Chrome 51.0.2704.103 m but also happens in Firefox - but not that "hard" like in Chrome.</p>
  
  <p>JSFiddle: <a href="https://jsfiddle.net/amwkgtue/" rel="nofollow">https://jsfiddle.net/amwkgtue/</a></p>
  
  <p>i know why the fiddle is not working correctly: you have to expand the preview-window so the nav is actually floating (it has min-width: 1440px) - or go full fullscreen: <a href="https://fiddle.jshell.net/amwkgtue/show/" rel="nofollow">https://fiddle.jshell.net/amwkgtue/show/</a></p>
  
  <pre><code>&lt;header&gt;
    &lt;div class="fixed"&gt;
      &lt;div class="bluegradient"&gt;
        &lt;div class="container navigation"&gt;
          &lt;div class="row"&gt;
            &lt;div class="col-sm-12"&gt;
              &lt;nav class="nav" id="navigation"&gt;
                &lt;ul class="nav"&gt;
                  &lt;li class="active"&gt;&lt;a href="#"&gt;Home&lt;/a&gt;&lt;/li&gt;
                  &lt;li&gt;&lt;a href="#"&gt;About Us&lt;/a&gt;&lt;/li&gt;
                  &lt;li&gt;&lt;a href="#"&gt;Places&lt;/a&gt;&lt;/li&gt;
                  &lt;li&gt;&lt;a href="#"&gt;Products&lt;/a&gt;&lt;/li&gt;
                  &lt;li&gt;&lt;a href="#"&gt;Service&lt;/a&gt;&lt;/li&gt;
                  &lt;li&gt;&lt;a href="#"&gt;Example&lt;/a&gt;&lt;/li&gt;
                  &lt;li class="parent"&gt;&lt;a href="#"&gt;Career&lt;/a&gt;
                    &lt;div class="childcontainer"&gt;
                      &lt;div class="container"&gt;
                        &lt;div class="row"&gt;
                          &lt;div class="col-sm-12"&gt;
                            &lt;ul class="child row"&gt;
                              &lt;li class="col-sm-4 parent"&gt;&lt;a href="#"&gt;Example&lt;/a&gt;
                                &lt;ul class="child"&gt;
                                  &lt;li&gt;&lt;a href="#"&gt;Example&lt;/a&gt;&lt;/li&gt;
                                  &lt;li&gt;&lt;a href="#"&gt;Example&lt;/a&gt;&lt;/li&gt;
                                  &lt;li&gt;&lt;a href="#"&gt;Example&lt;/a&gt;&lt;/li&gt;
                                  &lt;li&gt;&lt;a href="#"&gt;Example&lt;/a&gt;&lt;/li&gt;
                                  &lt;li&gt;&lt;a href="#"&gt;Example&lt;/a&gt;&lt;/li&gt;
                                &lt;/ul&gt;
                                &lt;a href="#" class="hidden-md hidden-lg navcaret"&gt;&lt;/a&gt;
                              &lt;/li&gt;
                              &lt;li class="col-sm-4"&gt;&lt;a href="#"&gt;Example&lt;/a&gt;&lt;/li&gt;
                            &lt;/ul&gt;
                          &lt;/div&gt;
                        &lt;/div&gt;
                      &lt;/div&gt;
                      &lt;div class="container-fluid"&gt;
                        &lt;div class="row"&gt;
                          &lt;div class="socialbar col-sm-12"&gt;
                            &lt;ul class="list-inline"&gt;
                              &lt;li&gt;
                                &lt;a href="#"&gt;&lt;img src="typo3conf/ext/sitetemplate/Resources/Public/img/facebook.png" class="img-responsive"&gt;&lt;/a&gt;
                              &lt;/li&gt;
                              &lt;li&gt;
                                &lt;a href="#"&gt;&lt;img src="typo3conf/ext/sitetemplate/Resources/Public/img/linkedin.png" class="img-responsive"&gt;&lt;/a&gt;
                              &lt;/li&gt;
                              &lt;li&gt;
                                &lt;a href="#"&gt;&lt;img src="typo3conf/ext/sitetemplate/Resources/Public/img/youtube.png" class="img-responsive"&gt;&lt;/a&gt;
                              &lt;/li&gt;
                            &lt;/ul&gt;
                          &lt;/div&gt;
                        &lt;/div&gt;
                      &lt;/div&gt;
                    &lt;/div&gt;
                    &lt;a href="#" class="hidden-md hidden-lg navcaret"&gt;&lt;/a&gt;
                  &lt;/li&gt;
                  &lt;li class="parent"&gt;&lt;a href="#"&gt;Contact&lt;/a&gt;
                    &lt;a href="#" class="hidden-md hidden-lg navcaret"&gt;&lt;/a&gt;
                  &lt;/li&gt;
                  &lt;li&gt;&lt;a href="#"&gt;Shop&lt;/a&gt;&lt;/li&gt;
                &lt;/ul&gt;
              &lt;/nav&gt;
            &lt;/div&gt;
          &lt;/div&gt;
        &lt;/div&gt;
      &lt;/div&gt;
    &lt;/div&gt;
  &lt;/header&gt;
  </code></pre>
  
  <p>don't mind the missing images, they are not necessary to reproduce the flicker.</p>
  
  <p>scss: </p>
  
  <pre><code>/* COLORS */
  
  $primary: #24366e; // BLUE
  $yellow: #ffed00; // YELLOW
  $grey: #f3f7fb;
  $font: "Swiss-Thin",
  Arial,
  sans-serif;
  $font-light: "Swiss-Light",
  Arial,
  sans-serif;
  $font-medium: "Swiss-Medium",
  Arial,
  sans-serif;
  $fontmedium: 500;
  ////////////
  body {
    background-color: #fff;
    font-family: $font;
    font-weight: 400;
    line-height: 1.48;
  }
  
  a,
  button,
  .btn,
  .btn-small {
    &amp;:focus,
    &amp;:hover {
      outline: 0;
    }
  }
  
  .container,
  .container-fluid,
  .col-xs-1,
  .col-sm-1,
  .col-md-1,
  .col-lg-1,
  .col-xs-2,
  .col-sm-2,
  .col-md-2,
  .col-lg-2,
  .col-xs-3,
  .col-sm-3,
  .col-md-3,
  .col-lg-3,
  .col-xs-4,
  .col-sm-4,
  .col-md-4,
  .col-lg-4,
  .col-xs-5,
  .col-sm-5,
  .col-md-5,
  .col-lg-5,
  .col-xs-6,
  .col-sm-6,
  .col-md-6,
  .col-lg-6,
  .col-xs-7,
  .col-sm-7,
  .col-md-7,
  .col-lg-7,
  .col-xs-8,
  .col-sm-8,
  .col-md-8,
  .col-lg-8,
  .col-xs-9,
  .col-sm-9,
  .col-md-9,
  .col-lg-9,
  .col-xs-10,
  .col-sm-10,
  .col-md-10,
  .col-lg-10,
  .col-xs-11,
  .col-sm-11,
  .col-md-11,
  .col-lg-11,
  .col-xs-12,
  .col-sm-12,
  .col-md-12,
  .col-lg-12 {
    padding-left: 4%;
    padding-right: 4%;
  }
  
  .row {
    margin-left: -4%;
    margin-right: -4%;
  }
  
  @media (min-width: 768px) {
    .container,
    .container-fluid,
    .col-xs-1,
    .col-sm-1,
    .col-md-1,
    .col-lg-1,
    .col-xs-2,
    .col-sm-2,
    .col-md-2,
    .col-lg-2,
    .col-xs-3,
    .col-sm-3,
    .col-md-3,
    .col-lg-3,
    .col-xs-4,
    .col-sm-4,
    .col-md-4,
    .col-lg-4,
    .col-xs-5,
    .col-sm-5,
    .col-md-5,
    .col-lg-5,
    .col-xs-6,
    .col-sm-6,
    .col-md-6,
    .col-lg-6,
    .col-xs-7,
    .col-sm-7,
    .col-md-7,
    .col-lg-7,
    .col-xs-8,
    .col-sm-8,
    .col-md-8,
    .col-lg-8,
    .col-xs-9,
    .col-sm-9,
    .col-md-9,
    .col-lg-9,
    .col-xs-10,
    .col-sm-10,
    .col-md-10,
    .col-lg-10,
    .col-xs-11,
    .col-sm-11,
    .col-md-11,
    .col-lg-11,
    .col-xs-12,
    .col-sm-12,
    .col-md-12,
    .col-lg-12 {
      padding-left: 35px;
      padding-right: 35px;
    }
    .row {
      margin-left: -35px;
      margin-right: -35px;
    }
  }
  
  header {
    position: relative;
    width: 100%;
  }
  
  $transition: all ease-in-out 0.3s;
  header .fixed {
    width: 100%;
    height: 121px;
    max-height: 121px;
    position: fixed;
    transition: $transition;
    &amp;.affix {
      transition: $transition;
      max-height: 100px;
      height: 100px;
    }
  }
  
  @media (min-width: 768px) {
    header .fixed {
      height: 200px;
      max-height: 200px;
      &amp;.affix {
        height: 140px;
        max-height: 140px;
      }
    }
  }
  
  @media (min-width: 1025px) {
    header .fixed {
      height: 248px;
      max-height: 248px;
      transition: $transition;
      &amp;.affix {
        height: 148px;
        max-height: 148px;
        transition: $transition;
      }
    }
  }
  
  .fixed {
    top: 0;
    left: 0;
    right: 0;
    width: 100%;
    height: 100%;
    z-index: 10;
  }
  
  .bluegradient {
    background: linear-gradient(to bottom, rgba(36, 54, 110, 1) 0%, rgba(36, 54, 110, 1) 38%, rgba(36, 54, 110, 0.35) 100%);
    height: 100%;
  }
  
  .navigation {
    div[class^='col-'] {
      position: static;
    }
  }
  
  @media (min-width: 1025px) {
    .mobilemenu {
      display: none;
      z-index: -20;
    }
    .navigation {
      margin-top: 0px;
      width: 100% !important;
      max-height: 65px;
    }
    #navigation {
      width: 100%;
    }
    #navigation .col-sm-12 {
      position: relative;
    }
    .navbar-header {
      display: none;
    }
    .fixed.affix .navigation #navigation {
      padding-top: 4px;
      -webkit-padding-before: 5px;
      ul {
        li {
          a {
            @media (max-width: 1280px) {
              padding: 10px 12px !important;
            }
            padding: 10px 25px !important;
          }
          &amp;.parent:hover {
            &gt;.childcontainer {
              padding-top: 148px !important;
            }
          }
        }
      }
    }
    .fixed .navigation #navigation {
      display: block;
      padding-top: 195px;
      -webkit-padding-before: 196px;
      text-align: center;
      ul {
        display: inline-block;
        margin: 0;
        padding: 0;
        li {
          float: left;
          position: static;
          a {
            color: #fff;
            font-size: 18px;
            font-family: $font-light;
            transition: all ease-in-out 0.3s;
            text-transform: uppercase;
            @media (max-width: 1280px) {
              padding: 13px 12px !important;
            }
            padding: 13px 25px;
            &amp;:hover,
            &amp;:focus {
              background-color: $primary;
              text-decoration: none;
              color: $yellow;
              transition: all ease-in-out 0.3s;
            }
          }
          .childcontainer {
            visibility: hidden;
            opacity: 0;
            position: absolute;
            top: 0;
            transition: all ease-in-out 0.6s;
            width: 100%;
            background-color: #fff;
            left: 0;
            z-index: -1;
          }
          &gt;.childcontainer&gt;.container-fluid {
            background-color: $primary;
            visibility: hidden;
            opacity: 0;
            min-height: 51px;
            max-height: 52px;
            transition: all ease-in-out 0.6s;
            ul.list-inline {
              display: none;
            }
          }
          ul.child {
            display: none;
            ul.child {
              display: none;
            }
          }
          &amp;.parent:hover,
          &amp;.parent:focus {
            &gt;a {
              color: $yellow;
              background-color: $primary;
            }
            &gt;.childcontainer {
              display: block;
              visibility: visible;
              background-color: #fff;
              opacity: 1;
              top: 0;
              padding-top: 248px;
              transition: all ease-in-out 0.6s;
            }
            &gt;.childcontainer&gt;.container {
              min-height: 92px;
            }
            &gt;.childcontainer&gt;.container&gt;.row&gt;.col-sm-12&gt;ul.child {
              display: block;
              list-style-type: none;
              width: 100%;
              /*@-moz-document url-prefix() {
                              left: 1px;
                          }*/
              &gt;li&gt;a {
                padding: 10px 25px;
                display: block;
                background-image: none;
                background-size: auto 24px;
                background-position: left -1px center;
                color: $primary;
              }
              &gt;li:hover&gt;a,
              &gt;li.active&gt;a,
              &gt;li:focus&gt;a {
                background-image: url(../img/arrow_blue.png);
                background-repeat: no-repeat;
                background-size: auto 24px;
                background-color: #fff;
              }
              li.parent:hover {
                &gt;ul.child {
                  display: none;
                  position: absolute;
                  left: 100%;
                  margin-top: -43px;
                  border-left: 1px solid #fff;
                }
              }
            }
            &gt;.childcontainer&gt;.container-fluid {
              background-color: $primary;
              visibility: visible;
              opacity: 1;
              transition: all ease-in-out 0.6s;
              .socialbar {
                text-align: right;
                padding-top: 10px;
                padding-bottom: 5px;
                ul&gt;li&gt;a {
                  background-color: inherit;
                  text-decoration: none;
                  color: inherit;
                  transition: none;
                  display: inline-block;
                  padding: 0;
                  &amp;:hover,
                  &amp;:focus {
                    transition: none;
                    color: inherit;
                    text-decoration: none;
                    background-color: inherit;
                  }
                }
              }
              ul.list-inline {
                display: inline-block;
                li {
                  display: inline-block !important;
                  margin-right: 15px;
                  &amp;:last-of-type {
                    margin-right: 0px;
                  }
                  img {
                    max-width: 30px;
                  }
                }
              }
            }
          }
          &amp;.active {
            &gt;a {
              color: $yellow;
            }
          }
        }
      }
    }
  }
  
  @media (min-width: 1440px) {
    .fixed .navigation #navigation {
      display: block;
      padding-top: 26px;
      -webkit-padding-before: 27px;
      text-align: center;
      ul {
        display: inline-block;
        margin: 0;
        padding: 0;
      }
    }
    .navigation {
      width: 1370px !important;
    }
    #navigation {
      padding-top: 21px;
      -webkit-padding-before: 22px;
    }
  }
  </code></pre>
  
  <p>ah forgot to mention this:</p>
  
  <p>this navigation was a <code>&lt;ul class="nav nav-justified"&gt;</code> before, and at that time the dropdown was working smoothly!</p>