下拉菜单闪烁（绝对位置，悬停后可见）

Question

我遇到了菜单闪烁问题，我花了 3 个小时调查此闪烁的来源 - 但我无法解决。

将鼠标悬停在“职业”点上并用鼠标导航到下拉菜单以查看闪烁。

我当前的浏览器：Chrome 51.0.2704.103 m，但也出现在 Firefox 中 - 但不像 Chrome 那样“硬”。

JSFiddle：https://jsfiddle.net/amwkgtue/

我知道为什么小提琴不能正常工作：您必须展开预览窗口，以便导航实际上是浮动的（它的最小宽度：1440px） - 或者全屏：https://fiddle.jshell.net/amwkgtue/show/

<header>
  <div class="fixed">
    <div class="bluegradient">
      <div class="container navigation">
        <div class="row">
          <div class="col-sm-12">
            <nav class="nav" id="navigation">
              <ul class="nav">
                <li class="active"><a href="#">Home</a></li>
                <li><a href="#">About Us</a></li>
                <li><a href="#">Places</a></li>
                <li><a href="#">Products</a></li>
                <li><a href="#">Service</a></li>
                <li><a href="#">Example</a></li>
                <li class="parent"><a href="#">Career</a>
                  <div class="childcontainer">
                    <div class="container">
                      <div class="row">
                        <div class="col-sm-12">
                          <ul class="child row">
                            <li class="col-sm-4 parent"><a href="#">Example</a>
                              <ul class="child">
                                <li><a href="#">Example</a></li>
                                <li><a href="#">Example</a></li>
                                <li><a href="#">Example</a></li>
                                <li><a href="#">Example</a></li>
                                <li><a href="#">Example</a></li>
                              </ul>
                              <a href="#" class="hidden-md hidden-lg navcaret"></a>
                            </li>
                            <li class="col-sm-4"><a href="#">Example</a></li>
                          </ul>
                        </div>
                      </div>
                    </div>
                    <div class="container-fluid">
                      <div class="row">
                        <div class="socialbar col-sm-12">
                          <ul class="list-inline">
                            <li>
                              <a href="#"><img src="typo3conf/ext/sitetemplate/Resources/Public/img/facebook.png" class="img-responsive"></a>
                            </li>
                            <li>
                              <a href="#"><img src="typo3conf/ext/sitetemplate/Resources/Public/img/linkedin.png" class="img-responsive"></a>
                            </li>
                            <li>
                              <a href="#"><img src="typo3conf/ext/sitetemplate/Resources/Public/img/youtube.png" class="img-responsive"></a>
                            </li>
                          </ul>
                        </div>
                      </div>
                    </div>
                  </div>
                  <a href="#" class="hidden-md hidden-lg navcaret"></a>
                </li>
                <li class="parent"><a href="#">Contact</a>
                  <a href="#" class="hidden-md hidden-lg navcaret"></a>
                </li>
                <li><a href="#">Shop</a></li>
              </ul>
            </nav>
          </div>
        </div>
      </div>
    </div>
  </div>
</header>

不要介意丢失的图像，它们不是重现闪烁所必需的。

scss:

/* 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 {
  &:focus,
  &: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;
  &.affix {
    transition: $transition;
    max-height: 100px;
    height: 100px;
  }
}

@media (min-width: 768px) {
  header .fixed {
    height: 200px;
    max-height: 200px;
    &.affix {
      height: 140px;
      max-height: 140px;
    }
  }
}

@media (min-width: 1025px) {
  header .fixed {
    height: 248px;
    max-height: 248px;
    transition: $transition;
    &.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;
        }
        &.parent:hover {
          >.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;
          &:hover,
          &: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;
        }
        >.childcontainer>.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;
          }
        }
        &.parent:hover,
        &.parent:focus {
          >a {
            color: $yellow;
            background-color: $primary;
          }
          >.childcontainer {
            display: block;
            visibility: visible;
            background-color: #fff;
            opacity: 1;
            top: 0;
            padding-top: 248px;
            transition: all ease-in-out 0.6s;
          }
          >.childcontainer>.container {
            min-height: 92px;
          }
          >.childcontainer>.container>.row>.col-sm-12>ul.child {
            display: block;
            list-style-type: none;
            width: 100%;
            /*@-moz-document url-prefix() {
                            left: 1px;
                        }*/
            >li>a {
              padding: 10px 25px;
              display: block;
              background-image: none;
              background-size: auto 24px;
              background-position: left -1px center;
              color: $primary;
            }
            >li:hover>a,
            >li.active>a,
            >li:focus>a {
              background-image: url(../img/arrow_blue.png);
              background-repeat: no-repeat;
              background-size: auto 24px;
              background-color: #fff;
            }
            li.parent:hover {
              >ul.child {
                display: none;
                position: absolute;
                left: 100%;
                margin-top: -43px;
                border-left: 1px solid #fff;
              }
            }
          }
          >.childcontainer>.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>li>a {
                background-color: inherit;
                text-decoration: none;
                color: inherit;
                transition: none;
                display: inline-block;
                padding: 0;
                &:hover,
                &: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;
                &:last-of-type {
                  margin-right: 0px;
                }
                img {
                  max-width: 30px;
                }
              }
            }
          }
        }
        &.active {
          >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;
  }
}

忘了说这个了：

这个导航之前是一个<ul class="nav nav-justified">，当时下拉很流畅！

Answer 1

您似乎没有为标题使用许多 Bootstrap 类。此外，您有一个嵌套在另一个“nav”中的“nav”，这会导致样式问题。

这是一个非常简单的带有悬停下拉菜单的 Bootstrap 标题：

HTML：

<nav class="navbar navbar-default navbar-fixed-top">
  <div class="container-fluid">
    <!-- Brand and toggle get grouped for better mobile display -->
    <div class="navbar-header">
      <button type="button" class="navbar-toggle collapsed" data-toggle="collapse" data-target="#bs-example-navbar-collapse-1" aria-expanded="false">
        <span class="sr-only">Toggle navigation</span>
        <span class="icon-bar"></span>
        <span class="icon-bar"></span>
        <span class="icon-bar"></span>
      </button>
      <a class="navbar-brand" href="#">Brand</a>
    </div>

    <!-- Collect the nav links, forms, and other content for toggling -->
    <div class="collapse navbar-collapse" id="bs-example-navbar-collapse-1">
      <ul class="nav navbar-nav navbar-right">
        <li><a href="#">Home</a></li>
        <li><a href="#">About Us</a></li>
        <li><a href="#">Places</a></li>
        <li><a href="#">Products</a></li>
        <li><a href="#">Service</a></li>
        <li><a href="#">Example</a></li>
        <li class="dropdown">
          <a href="#" class="dropdown-toggle" data-toggle="dropdown" role="button" aria-haspopup="true" aria-expanded="false">Career <span class="caret"></span></a>
          <ul class="dropdown-menu">
            <li><a href="#">Action</a></li>
            <li><a href="#">Another action</a></li>
            <li><a href="#">Something else here</a></li>
            <li role="separator" class="divider"></li>
            <li><a href="#">Separated link</a></li>
          </ul>
        </li>
      </ul>
    </div><!-- /.navbar-collapse -->
  </div><!-- /.container-fluid -->
</nav>

CSS：

@media (min-width: 768px) {
  /* Make dropdown show on hover, rather than click (Only on desktop viewports) */
  ul.nav li.dropdown:hover > ul.dropdown-menu {
    display: block;
  }
}

http://codepen.io/charliebeckstrand/pen/YWaaWp

Answer 2

我做了一个解决方法，因为我在浮点中找不到闪烁问题 - 所以再次切换到内联块列表元素而不是浮动列表元素。