1. 首页
  2. 问答
  3. 藿到twittter引导下拉菜单悬停和禁用点击

藿到twittter引导下拉菜单悬停和禁用点击

2017-04-06 80 views
0

拨动导航 NewWindow 藿到twittter引导下拉菜单悬停和禁用点击

 <div class="collapse navbar-collapse" id="navbar-collapse-1"> 
      <ul class="nav navbar-nav"> 
       <li class="active"><a href="#">Active Link</a></li> 
       <li><a href="#">Link</a></li> 
       <li class="dropdown"><a href="#" class="dropdown-toggle" data-toggle="dropdown">Dropdown <b class="caret"></b></a> 
        <ul class="dropdown-menu"> 
         <li><a href="#">Dropdown Link 1</a></li> 
         <li><a href="#">Dropdown Link 2</a></li> 
         <li><a href="#">Dropdown Link 3</a></li> 
         <li class="divider"></li> 
         <li class="dropdown dropdown-submenu"><a href="#" class="dropdown-toggle" data-toggle="dropdown">Dropdown Link 4</a> 
          <ul class="dropdown-menu"> 
           <li><a href="#">Dropdown Submenu Link 4.1</a></li> 
           <li><a href="#">Dropdown Submenu Link 4.2</a></li> 
           <li><a href="#">Dropdown Submenu Link 4.3</a></li> 
           <li><a href="#">Dropdown Submenu Link 4.4</a></li> 
          </ul> 
         </li> 
         <li class="dropdown dropdown-submenu"><a href="#" class="dropdown-toggle" data-toggle="dropdown">Dropdown Link 5</a> 
          <ul class="dropdown-menu"> 
           <li><a href="#">Dropdown Submenu Link 5.1</a></li> 
           <li><a href="#">Dropdown Submenu Link 5.2</a></li> 
           <li><a href="#">Dropdown Submenu Link 5.3</a></li> 
           <li class="divider"></li> 
           <li class="dropdown dropdown-submenu"><a href="#" class="dropdown-toggle" data-toggle="dropdown">Dropdown Submenu Link 5.4</a> 
            <ul class="dropdown-menu"> 
             <li><a href="#">Dropdown Submenu Link 5.4.1</a></li> 
             <li><a href="#">Dropdown Submenu Link 5.4.2</a></li> 
             <li class="divider"></li> 
             <li class="dropdown dropdown-submenu"><a href="#" class="dropdown-toggle" data-toggle="dropdown">Dropdown Submenu Link 5.4.3</a> 
              <ul class="dropdown-menu"> 
               <li><a href="#">Dropdown Submenu Link 5.4.3.1</a></li> 
               <li><a href="#">Dropdown Submenu Link 5.4.3.2</a></li> 
               <li><a href="#">Dropdown Submenu Link 5.4.3.3</a></li> 
               <li><a href="#">Dropdown Submenu Link 5.4.3.4</a></li> 
              </ul> 
             </li> 
             <li class="dropdown dropdown-submenu"><a href="#" class="dropdown-toggle" data-toggle="dropdown">Dropdown Submenu Link 5.4.4</a> 
              <ul class="dropdown-menu"> 
               <li><a href="#">Dropdown Submenu Link 5.4.4.1</a></li> 
               <li><a href="#">Dropdown Submenu Link 5.4.4.2</a></li> 
               <li><a href="#">Dropdown Submenu Link 5.4.4.3</a></li> 
               <li><a href="#">Dropdown Submenu Link 5.4.4.4</a></li> 
              </ul> 
             </li> 
            </ul> 
           </li> 
          </ul> 
         </li> 
        </ul> 
       </li> 
       <li class="dropdown"><a href="#" class="dropdown-toggle" data-toggle="dropdown">Dropdown <b class="caret"></b></a> 
        <ul class="dropdown-menu"> 
         <li><a href="#">Dropdown Link 1</a></li> 
         <li><a href="#">Dropdown Link 2</a></li> 
         <li><a href="#">Dropdown Link 3</a></li> 
         <li class="divider"></li> 
         <li class="dropdown dropdown-submenu"><a href="#" class="dropdown-toggle" data-toggle="dropdown">Dropdown Link 4</a> 
          <ul class="dropdown-menu"> 
           <li><a href="#">Dropdown Submenu Link 4.1</a></li> 
           <li><a href="#">Dropdown Submenu Link 4.2</a></li> 
           <li><a href="#">Dropdown Submenu Link 4.3</a></li> 
           <li><a href="#">Dropdown Submenu Link 4.4</a></li> 
          </ul> 
         </li> 
         <li class="dropdown dropdown-submenu"><a href="#" class="dropdown-toggle" data-toggle="dropdown">Dropdown Link 5</a> 
          <ul class="dropdown-menu"> 
           <li><a href="#">Dropdown Submenu Link 5.1</a></li> 
           <li><a href="#">Dropdown Submenu Link 5.2</a></li> 
           <li><a href="#">Dropdown Submenu Link 5.3</a></li> 
           <li class="divider"></li> 
           <li class="dropdown dropdown-submenu"><a href="#" class="dropdown-toggle" data-toggle="dropdown">Dropdown Submenu Link 5.4</a> 
            <ul class="dropdown-menu"> 
             <li><a href="#">Dropdown Submenu Link 5.4.1</a></li> 
             <li><a href="#">Dropdown Submenu Link 5.4.2</a></li> 
             <li class="divider"></li> 
             <li class="dropdown dropdown-submenu"><a href="#" class="dropdown-toggle" data-toggle="dropdown">Dropdown Submenu Link 5.4.3</a> 
              <ul class="dropdown-menu"> 
               <li><a href="#">Dropdown Submenu Link 5.4.3.1</a></li> 
               <li><a href="#">Dropdown Submenu Link 5.4.3.2</a></li> 
               <li><a href="#">Dropdown Submenu Link 5.4.3.3</a></li> 
               <li><a href="#">Dropdown Submenu Link 5.4.3.4</a></li> 
              </ul> 
             </li> 
             <li class="dropdown dropdown-submenu"><a href="#" class="dropdown-toggle" data-toggle="dropdown">Dropdown Submenu Link 5.4.4</a> 
              <ul class="dropdown-menu"> 
               <li><a href="#">Dropdown Submenu Link 5.4.4.1</a></li> 
               <li><a href="#">Dropdown Submenu Link 5.4.4.2</a></li> 
               <li><a href="#">Dropdown Submenu Link 5.4.4.3</a></li> 
               <li><a href="#">Dropdown Submenu Link 5.4.4.4</a></li> 
              </ul> 
             </li> 
            </ul> 
           </li> 
          </ul> 
         </li> 
        </ul> 
       </li> 
      </ul> 
     </div><!-- /.navbar-collapse --> 
    </nav> 

    <div class="jumbotron"> 
     <h1 class="page-header">Bootstrap 3.0.3<br> 
     <small>Navbar - Click Dropdown - Sub - Sub - Sub - Sub ...</small></h1> 
    </div> 

    <div class="container"> 

     <div class="row"> 
      <h1>You Like It ?</h1> 
      <br> 
     </div> 

    </div>

CSS代码

.marginBottom-0 { 
    margin-bottom: 0; 
} 

.dropdown-submenu { 
    position: relative; 
} 

.dropdown-submenu>.dropdown-menu { 
    top: 0; 
    left: 100%; 
    margin-top: -6px; 
    margin-left: -1px; 
    -webkit-border-radius: 0 6px 6px 6px; 
    -moz-border-radius: 0 6px 6px 6px; 
    border-radius: 0 6px 6px 6px; 
} 

.dropdown-submenu>a:after { 
    display: block; 
    content: " "; 
    float: right; 
    width: 0; 
    height: 0; 
    border-color: transparent; 
    border-style: solid; 
    border-width: 5px 0 5px 5px; 
    border-left-color: #cccccc; 
    margin-top: 5px; 
    margin-right: -10px; 
} 

.dropdown-submenu:hover>a:after { 
    border-left-color: #555; 
} 

.dropdown-submenu.pull-left { 
    float: none; 
} 

.dropdown-submenu.pull-left>.dropdown-menu { 
    left: -100%; 
    margin-left: 10px; 
    -webkit-border-radius: 6px 0 6px 6px; 
    -moz-border-radius: 6px 0 6px 6px; 
    border-radius: 6px 0 6px 6px; 
}

enter image description here

来源

2017-04-06 sting

+0

对不起。我的问题是如何twitter引导下拉菜单悬停和禁用点击 – sting

回答

0

我看到你错过了开幕<nav>标签，它应该是这个样子：

.nav li.dropdown:hover>ul.dropdown-menu { 
    display: block; 
}

：

<nav class="navbar navbar-default">

关于悬停，您可以通过使用纯CSS hover做到这一点请看下面的工作片段：

.marginBottom-0 { 
 
    margin-bottom: 0; 
 
} 
 

 
.dropdown-submenu { 
 
    position: relative; 
 
} 
 

 
.dropdown-submenu>.dropdown-menu { 
 
    top: 0; 
 
    left: 100%; 
 
    margin-top: -6px; 
 
    margin-left: -1px; 
 
    -webkit-border-radius: 0 6px 6px 6px; 
 
    -moz-border-radius: 0 6px 6px 6px; 
 
    border-radius: 0 6px 6px 6px; 
 
} 
 

 
.dropdown-submenu>a:after { 
 
    display: block; 
 
    content: " "; 
 
    float: right; 
 
    width: 0; 
 
    height: 0; 
 
    border-color: transparent; 
 
    border-style: solid; 
 
    border-width: 5px 0 5px 5px; 
 
    border-left-color: #cccccc; 
 
    margin-top: 5px; 
 
    margin-right: -10px; 
 
} 
 

 
.dropdown-submenu:hover>a:after { 
 
    border-left-color: #555; 
 
} 
 

 
.dropdown-submenu.pull-left { 
 
    float: none; 
 
} 
 

 
.dropdown-submenu.pull-left>.dropdown-menu { 
 
    left: -100%; 
 
    margin-left: 10px; 
 
    -webkit-border-radius: 6px 0 6px 6px; 
 
    -moz-border-radius: 6px 0 6px 6px; 
 
    border-radius: 6px 0 6px 6px; 
 
} 
 

 
.nav li.dropdown:hover>ul.dropdown-menu { 
 
    display: block; 
 
}
<script src="https://ajax.googleapis.com/ajax/libs/jquery/2.1.1/jquery.min.js"></script> 
 
<script src="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/js/bootstrap.min.js"></script> 
 
<link href="https://maxcdn.bootstrapcdn.com/bootstrap/3.3.7/css/bootstrap.min.css" rel="stylesheet" /> 
 
<nav class="navbar navbar-default"> 
 
    <div class="collapse navbar-collapse" id="navbar-collapse-1"> 
 
    <ul class="nav navbar-nav"> 
 
     <li class="active"><a href="#">Active Link</a></li> 
 
     <li><a href="#">Link</a></li> 
 
     <li class="dropdown"><a href="#" class="dropdown-toggle" data-toggle="dropdown">Dropdown <b class="caret"></b></a> 
 
     <ul class="dropdown-menu"> 
 
      <li><a href="#">Dropdown Link 1</a></li> 
 
      <li><a href="#">Dropdown Link 2</a></li> 
 
      <li><a href="#">Dropdown Link 3</a></li> 
 
      <li class="divider"></li> 
 
      <li class="dropdown dropdown-submenu"><a href="#" class="dropdown-toggle" data-toggle="dropdown">Dropdown Link 4</a> 
 
      <ul class="dropdown-menu"> 
 
       <li><a href="#">Dropdown Submenu Link 4.1</a></li> 
 
       <li><a href="#">Dropdown Submenu Link 4.2</a></li> 
 
       <li><a href="#">Dropdown Submenu Link 4.3</a></li> 
 
       <li><a href="#">Dropdown Submenu Link 4.4</a></li> 
 
      </ul> 
 
      </li> 
 
      <li class="dropdown dropdown-submenu"><a href="#" class="dropdown-toggle" data-toggle="dropdown">Dropdown Link 5</a> 
 
      <ul class="dropdown-menu"> 
 
       <li><a href="#">Dropdown Submenu Link 5.1</a></li> 
 
       <li><a href="#">Dropdown Submenu Link 5.2</a></li> 
 
       <li><a href="#">Dropdown Submenu Link 5.3</a></li> 
 
       <li class="divider"></li> 
 
       <li class="dropdown dropdown-submenu"><a href="#" class="dropdown-toggle" data-toggle="dropdown">Dropdown Submenu Link 5.4</a> 
 
       <ul class="dropdown-menu"> 
 
        <li><a href="#">Dropdown Submenu Link 5.4.1</a></li> 
 
        <li><a href="#">Dropdown Submenu Link 5.4.2</a></li> 
 
        <li class="divider"></li> 
 
        <li class="dropdown dropdown-submenu"><a href="#" class="dropdown-toggle" data-toggle="dropdown">Dropdown Submenu Link 5.4.3</a> 
 
        <ul class="dropdown-menu"> 
 
         <li><a href="#">Dropdown Submenu Link 5.4.3.1</a></li> 
 
         <li><a href="#">Dropdown Submenu Link 5.4.3.2</a></li> 
 
         <li><a href="#">Dropdown Submenu Link 5.4.3.3</a></li> 
 
         <li><a href="#">Dropdown Submenu Link 5.4.3.4</a></li> 
 
        </ul> 
 
        </li> 
 
        <li class="dropdown dropdown-submenu"><a href="#" class="dropdown-toggle" data-toggle="dropdown">Dropdown Submenu Link 5.4.4</a> 
 
        <ul class="dropdown-menu"> 
 
         <li><a href="#">Dropdown Submenu Link 5.4.4.1</a></li> 
 
         <li><a href="#">Dropdown Submenu Link 5.4.4.2</a></li> 
 
         <li><a href="#">Dropdown Submenu Link 5.4.4.3</a></li> 
 
         <li><a href="#">Dropdown Submenu Link 5.4.4.4</a></li> 
 
        </ul> 
 
        </li> 
 
       </ul> 
 
       </li> 
 
      </ul> 
 
      </li> 
 
     </ul> 
 
     </li> 
 
     <li class="dropdown"><a href="#" class="dropdown-toggle" data-toggle="dropdown">Dropdown <b class="caret"></b></a> 
 
     <ul class="dropdown-menu"> 
 
      <li><a href="#">Dropdown Link 1</a></li> 
 
      <li><a href="#">Dropdown Link 2</a></li> 
 
      <li><a href="#">Dropdown Link 3</a></li> 
 
      <li class="divider"></li> 
 
      <li class="dropdown dropdown-submenu"><a href="#" class="dropdown-toggle" data-toggle="dropdown">Dropdown Link 4</a> 
 
      <ul class="dropdown-menu"> 
 
       <li><a href="#">Dropdown Submenu Link 4.1</a></li> 
 
       <li><a href="#">Dropdown Submenu Link 4.2</a></li> 
 
       <li><a href="#">Dropdown Submenu Link 4.3</a></li> 
 
       <li><a href="#">Dropdown Submenu Link 4.4</a></li> 
 
      </ul> 
 
      </li> 
 
      <li class="dropdown dropdown-submenu"><a href="#" class="dropdown-toggle" data-toggle="dropdown">Dropdown Link 5</a> 
 
      <ul class="dropdown-menu"> 
 
       <li><a href="#">Dropdown Submenu Link 5.1</a></li> 
 
       <li><a href="#">Dropdown Submenu Link 5.2</a></li> 
 
       <li><a href="#">Dropdown Submenu Link 5.3</a></li> 
 
       <li class="divider"></li> 
 
       <li class="dropdown dropdown-submenu"><a href="#" class="dropdown-toggle" data-toggle="dropdown">Dropdown Submenu Link 5.4</a> 
 
       <ul class="dropdown-menu"> 
 
        <li><a href="#">Dropdown Submenu Link 5.4.1</a></li> 
 
        <li><a href="#">Dropdown Submenu Link 5.4.2</a></li> 
 
        <li class="divider"></li> 
 
        <li class="dropdown dropdown-submenu"><a href="#" class="dropdown-toggle" data-toggle="dropdown">Dropdown Submenu Link 5.4.3</a> 
 
        <ul class="dropdown-menu"> 
 
         <li><a href="#">Dropdown Submenu Link 5.4.3.1</a></li> 
 
         <li><a href="#">Dropdown Submenu Link 5.4.3.2</a></li> 
 
         <li><a href="#">Dropdown Submenu Link 5.4.3.3</a></li> 
 
         <li><a href="#">Dropdown Submenu Link 5.4.3.4</a></li> 
 
        </ul> 
 
        </li> 
 
        <li class="dropdown dropdown-submenu"><a href="#" class="dropdown-toggle" data-toggle="dropdown">Dropdown Submenu Link 5.4.4</a> 
 
        <ul class="dropdown-menu"> 
 
         <li><a href="#">Dropdown Submenu Link 5.4.4.1</a></li> 
 
         <li><a href="#">Dropdown Submenu Link 5.4.4.2</a></li> 
 
         <li><a href="#">Dropdown Submenu Link 5.4.4.3</a></li> 
 
         <li><a href="#">Dropdown Submenu Link 5.4.4.4</a></li> 
 
        </ul> 
 
        </li> 
 
       </ul> 
 
       </li> 
 
      </ul> 
 
      </li> 
 
     </ul> 
 
     </li> 
 
    </ul> 
 
    </div> 
 
    <!-- /.navbar-collapse --> 
 
</nav> 
 

 
<div class="jumbotron"> 
 
    <h1 class="page-header">Bootstrap 3.0.3<br> 
 
    <small>Navbar - Click Dropdown - Sub - Sub - Sub - Sub ...</small></h1> 
 
</div> 
 

 
<div class="container"> 
 

 
    <div class="row"> 
 
    <h1>You Like It ?</h1> 
 
    <br> 
 
    </div> 
 

 
</div>

来源

2017-04-06 07:50:13 Ionut

相关问题

 相关问题