悬停时的Bootstrap下拉菜单（使用Creative-Tim Icon Navbar）

时间：2016-09-04 12:26:23

标签： html css drop-down-menu twitter-bootstrap-3 navbar

这与普通的Bootstrap导航栏不同，它是（http://www.creative-tim.com/live/navbar-with-icons）发现的Bootstrap的Creative Tim图标导航栏我在将鼠标悬停在下拉导航栏时遇到了一些问题。我试过用... 

featureList = [u'guinea', u'bissau', u'compared', u'countriesthe', u'population', u'density', u'guinea', u'bissau', u'similar', u'iran', u'afghanistan', u'cameroon', u'panama', u'montenegro', u'guinea', u'belarus', u'palau', u'location_slot', u'south', u'africa', u'respective', u'population', u'density', u'lrb', u'capita', u'per', u'square', u'kilometer', u'rrb', u'global', u'rank', u'number_slot', u'years', u'growthguinea', u'bissau', u'population', u'density', u'positive', u'growth', u'lrb', u'rrb', u'last', u'years', u'lrb', u'rrb', u'LOCATION_SLOT~-appos+LOCATION~-prep_of', u'LOCATION~-prep_of+that~-prep_to', u'that~-prep_to+similar~prep_with', u'similar~prep_with+density~prep_of', u'density~prep_of+NUMBER~appos', u'NUMBER~appos+NUMBER~amod', u'NUMBER~amod+NUMBER_SLOT']

featureVector = mydefaultdict(mydouble)

for featureID,featureVal in enumerate(featureList):
        print "featureID is",featureID
        print "featureVal is ",featureVal
        print "Encoded feature value is", id(intern(str(featureVal.encode("utf-8"))))
        featureVector[featureID] = featureVal


featureID is 0
featureVal is  guinea
Encoded feature value is 4569583120.0
featureID is 1
featureVal is  bissau
Encoded feature value is 4569581632.0
featureID is 2
featureVal is  compared
Encoded feature value is 4569583120.0
featureID is 3
featureVal is  countriesthe
Encoded feature value is 4567944360.0
featureID is 4
featureVal is  population
Encoded feature value is 4347153072.0
featureID is 5
featureVal is  density
Encoded feature value is 4455561472.0
featureID is 6
featureVal is  guinea
Encoded feature value is 4569581632.0
featureID is 7
featureVal is  bissau
Encoded feature value is 4569583120.0
featureID is 8
featureVal is  similar
Encoded feature value is 4496118144.0
featureID is 9
featureVal is  iran
Encoded feature value is 4569583120.0
featureID is 10
featureVal is  afghanistan
Encoded feature value is 4569581632.0
featureID is 11
featureVal is  cameroon
Encoded feature value is 4569583120.0
featureID is 12
featureVal is  panama
Encoded feature value is 4569581632.0
featureID is 13
featureVal is  montenegro
Encoded feature value is 4569583120.0
featureID is 14
featureVal is  guinea
Encoded feature value is 4569581632.0
featureID is 15
featureVal is  belarus
Encoded feature value is 4569583120.0
featureID is 16
featureVal is  palau
Encoded feature value is 4569581632.0
featureID is 17
featureVal is  location_slot
Encoded feature value is 4567944360.0
featureID is 18
featureVal is  south
Encoded feature value is 4569583120.0
featureID is 19
featureVal is  africa
Encoded feature value is 4569581632.0
featureID is 20
featureVal is  respective
Encoded feature value is 4569583120.0
featureID is 21
featureVal is  population
Encoded feature value is 4347153072.0
featureID is 22
featureVal is  density
Encoded feature value is 4455561472.0
featureID is 23
featureVal is  lrb
Encoded feature value is 4537993216.0
featureID is 24
featureVal is  capita
Encoded feature value is 4569581632.0
featureID is 25
featureVal is  per
Encoded feature value is 4455914152.0
featureID is 26
featureVal is  square
Encoded feature value is 4347127296.0
featureID is 27
featureVal is  kilometer
Encoded feature value is 4569581632.0
featureID is 28
featureVal is  rrb
Encoded feature value is 4537993216.0
featureID is 29
featureVal is  global
Encoded feature value is 4346597072.0
featureID is 30
featureVal is  rank
Encoded feature value is 4346629984.0
featureID is 31
featureVal is  number_slot
Encoded feature value is 4569583120.0
featureID is 32
featureVal is  years
Encoded feature value is 4569581632.0
featureID is 33
featureVal is  growthguinea
Encoded feature value is 4567944360.0
featureID is 34
featureVal is  bissau
Encoded feature value is 4569583120.0
featureID is 35
featureVal is  population
Encoded feature value is 4347153072.0
featureID is 36
featureVal is  density
Encoded feature value is 4455561472.0
featureID is 37
featureVal is  positive
Encoded feature value is 4514096160.0
featureID is 38
featureVal is  growth
Encoded feature value is 4569583120.0
featureID is 39
featureVal is  lrb
Encoded feature value is 4537993216.0
featureID is 40
featureVal is  rrb
Encoded feature value is 4537993216.0
featureID is 41
featureVal is  last
Encoded feature value is 4346568112.0
featureID is 42
featureVal is  years
Encoded feature value is 4569583120.0
featureID is 43
featureVal is  lrb
Encoded feature value is 4537993216.0
featureID is 44
featureVal is  rrb
Encoded feature value is 4537993216.0
featureID is 45
featureVal is  LOCATION_SLOT~-appos+LOCATION~-prep_of
Encoded feature value is 4538026784.0
featureID is 46
featureVal is  LOCATION~-prep_of+that~-prep_to
Encoded feature value is 6043251168.0
featureID is 47
featureVal is  that~-prep_to+similar~prep_with
Encoded feature value is 6043251168.0
featureID is 48
featureVal is  similar~prep_with+density~prep_of
Encoded feature value is 6043251168.0
featureID is 49
featureVal is  density~prep_of+NUMBER~appos
Encoded feature value is 6043251168.0
featureID is 50
featureVal is  NUMBER~appos+NUMBER~amod
Encoded feature value is 6043247024.0
featureID is 51
featureVal is  NUMBER~amod+NUMBER_SLOT
Encoded feature value is 6043247024.0

但没有快乐。我怀疑创意时间导航栏会阻碍某些事情。

这是我的HTML：

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

这是我的Navbar下拉菜单的CSS 

  <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>

2 个答案:

答案 0 :(得分：0)

网站广告时间为使用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

答案 1 :(得分：0)

这段代码阻止了它

.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

相关问题
最新问题