Bootstrap 悬停时的下拉菜单（使用 Creative-Tim 图标导航栏）

Question

这与普通的 Bootstrap 导航栏不同，它是在 (http://www.creative-tim.com/live/navbar-with-icons) 找到的 Bootstrap 的 Creative Tim 图标导航栏我在获取时遇到了一些问题我的下拉导航栏在悬停时打开。我尝试使用...

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

却没有快乐。我怀疑创意蒂姆导航栏正在妨碍某些事情。

这是我的 HTML:

  <nav class="navscroll navbar navbar-light" style="background-color: #ecf1f0; color: #fff;" role="navigation">
    <div class="container">
    <div class="navbar-header">
    <button type="button" class="navbar-toggle" data-toggle="collapse" data-target="#mynav">
        <span class="sr-only">Toggle navigation</span>
            <span class="icon-bar"></span>
      <span class="icon-bar"></span>
      <span class="icon-bar"></span>
    </button>
  </div>
  <div class="collapse navbar-collapse" id="mynav">
    <ul class="nav navbar-nav" id="scroll">
        <li>
        <a href="#">
            <i class="fa fa-home" aria-hidden="true">
            </i>
            <p>Home</p>
        </a>
      </li>
      <li>
          <a href="#">
              <i class="fa fa-users" aria-hidden="true">
              </i>
              <p>About Us</p>
          </a>
      </li>
      <li>

        <li class="dropdown">
    <a href="#" class="dropdown-toggle" data-toggle="dropdown"><i class="fa fa-cube" aria-hidden="true">
    </i><p>Products</p></a>
    <ul class="dropdown-menu multi-column columns-3">

      <li class="col-sm-4">
        <ul class="multi-column-dropdown" style="font-size:17px;">
          <li><a href="#process" style="font-weight: bold">Banner Systems</a></li>
          <li><a href="#process">Roll Up</a></li>
          <li><a href="#process">L/X Banner</a></li>
          <li class="divider"></li>
          <li><a href="#">Separated link</a></li>
          <li class="divider"></li>
          <li><a href="#process" style="font-weight: bold">Cases</a></li>
          <li><a href="#process">Foam Cases</a></li>
        </ul>
      </li>

        <li class="col-sm-4">
          <ul class="multi-column-dropdown" style="font-size:17px;">
            <li><a href="#process" style="font-weight: bold">Image Walls</a></li>
            <li><a href="#process">Pop Up wall</a></li>
            <li><a href="#process">Tube Wall</a></li>
            <li><a href="#process">Alu Wall</a></li>

          </ul>
        </li>
        <li class="col-sm-4">
          <ul class="multi-column-dropdown" style="font-size:17px;">
            <li><a href="#process" style="font-weight: bold">Outdoor Systems</a></li>
            <li><a href="#process">Outdoor / Flags</a></li>
            <li><a href="#process">Wall Frames</a></li>

          </ul>
        </li>


    </ul>
</li>


      </li>
      <li>
        <a href="#">
            <i class="fa fa-shopping-cart" aria-hidden="true">
            </i>
            <p>Shop</p>
        </a>
      </li>
      <li>
        <a href="#">
            <i class="fa fa-download" aria-hidden="true">
            </i>
            <p>Downloads</p>
        </a>
      </li>
      <li>
        <a href="#">
            <i class="fa fa-newspaper-o" aria-hidden="true">
            </i>
            <p>News</p>
        </a>
      </li>
      <li>
        <a href="#">
          <i class="fa fa-phone" aria-hidden="true">
          </i>
          <p>Contact Us</p>
        </a>
      </li>
    </ul>


 </div>
</nav>

这是我的 CSS 导航栏下拉菜单

.navbar-nav > li > .dropdown-menu{
    display: block;
    padding: 0;
    z-index: 9000;
    position: absolute;
    -webkit-border-radius: 0px !important;
    box-shadow: 1px 2px 3px rgba(0, 0, 0, 0.125);
    border-radius: 0px;
    -webkit-box-sizing: border-box;
    -moz-box-sizing: border-box;
    box-sizing: border-box;
    opacity: 0;
    -ms-filter: "alpha(opacity=0)";
    -webkit-filter: alpha(opacity=0);
    -moz-filter: alpha(opacity=0);
    -ms-filter: alpha(opacity=0);
    -o-filter: alpha(opacity=0);
    filter: alpha(opacity=0);
    -webkit-transform: scale(0);
    -moz-transform: scale(0);
    -o-transform: scale(0);
    -ms-transform: scale(0);
    transform: scale(0);
    -webkit-transition: all 300ms cubic-bezier(0.34, 1.61, 0.7, 1);
    -moz-transition: all 300ms cubic-bezier(0.34, 1.61, 0.7, 1);
    -o-transition: all 300ms cubic-bezier(0.34, 1.61, 0.7, 1);
    -ms-transition: all 300ms cubic-bezier(0.34, 1.61, 0.7, 1);
    transition: all 300ms cubic-bezier(0.34, 1.61, 0.7, 1);
}

.navbar-nav > li.open > .dropdown-menu{
    -webkit-transform-origin: 29px -50px;
    -moz-transform-origin: 29px -50px;
    -o-transform-origin: 29px -50px;
    -ms-transform-origin: 29px -50px;
    transform-origin: 29px -50px;
    -webkit-transform: scale(1);
    -moz-transform: scale(1);
    -o-transform: scale(1);
    -ms-transform: scale(1);
    transform: scale(1);
    opacity: 1;
    -ms-filter: none;
    -webkit-filter: none;
    -moz-filter: none;
    -ms-filter: none;
    -o-filter: none;
    filter: none;
}

Answer 1

网站创意 tim 给李 class 打开 Javascript。但是你试试这个：

改变这个：

.navbar-nav > li.open > .dropdown-menu{
   -webkit-transform-origin: 29px -50px;
   -moz-transform-origin: 29px -50px;
   -o-transform-origin: 29px -50px;
   -ms-transform-origin: 29px -50px;
   transform-origin: 29px -50px;
   -webkit-transform: scale(1);
   -moz-transform: scale(1);
   -o-transform: scale(1);
   -ms-transform: scale(1);
   transform: scale(1);
   opacity: 1;
   -ms-filter: none;
   -webkit-filter: none;
   -moz-filter: none;
   -ms-filter: none;
   -o-filter: none;
   filter: none;
}

对此：

.navbar-nav > li:hover> .dropdown-menu{
   -webkit-transform-origin: 29px -50px;
   -moz-transform-origin: 29px -50px;
   -o-transform-origin: 29px -50px;
   -ms-transform-origin: 29px -50px;
   transform-origin: 29px -50px;
   -webkit-transform: scale(1);
   -moz-transform: scale(1);
   -o-transform: scale(1);
   -ms-transform: scale(1);
   transform: scale(1);
   opacity: 1;
   -ms-filter: none;
   -webkit-filter: none;
   -moz-filter: none;
   -ms-filter: none;
   -o-filter: none;
   filter: none;
}

将li.open更改为li:hover

Answer 2

这段代码阻塞了它

.navbar-nav > li > .dropdown-menu {
display: block;
padding: 0;
z-index: 9000;
position: absolute;
-webkit-border-radius: 0px !important;
box-shadow: 1px 2px 3px rgba(0, 0, 0, 0.125);
border-radius: 0px;
-webkit-box-sizing: border-box;
-moz-box-sizing: border-box;
box-sizing: border-box;
opacity: 0;
-ms-filter: "alpha(opacity=0)";
-webkit-filter: alpha(opacity=0);
-moz-filter: alpha(opacity=0);
-ms-filter: alpha(opacity=0);
-o-filter: alpha(opacity=0);
filter: alpha(opacity=0);
-webkit-transform: scale(0);
-moz-transform: scale(0);
-o-transform: scale(0);
-ms-transform: scale(0);
transform: scale(0);
-webkit-transition: all 300ms cubic-bezier(0.34, 1.61, 0.7, 1);
-moz-transition: all 300ms cubic-bezier(0.34, 1.61, 0.7, 1);
-o-transition: all 300ms cubic-bezier(0.34, 1.61, 0.7, 1);
-ms-transition: all 300ms cubic-bezier(0.34, 1.61, 0.7, 1);
transition: all 300ms cubic-bezier(0.34, 1.61, 0.7, 1);
}

你所要做的就是改变这个：

.navbar-nav > .li.open > .dropdown-menu{
...
}

进入

.navbar-nav > .dropdown:hover > .dropdown-menu{
...
}

查看 codepen 上的实例：http://codepen.io/anon/pen/EgaVLv

Bootstrap 悬停时的下拉菜单（使用 Creative-Tim 图标导航栏）

Bootstrap dropdown menu on hover (With Creative-Tim Icon Navbar)

html

css

navbar

drop-down-menu

twitter-bootstrap-3