一聚教程网:一个值得你收藏的教程网站

最新下载

热门教程

Bootstrap3多级下拉菜单

时间:2017-04-28 编辑:简简单单 来源:一聚教程网

本文实例为大家分享了Bootstrap下拉菜单的具体代码,供大家参考,具体内容如下

效果图:

- 需要引用bootstrap.min.css和bootstrap.min.css.js
- 代码如下

 

 代码如下 复制代码

 

 Bootstrap 3 的多级下拉菜单示例

 

 

 

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

    border-radius: 0 6px 6px 6px;

   }

 

   .dropdown-submenu:hover > .dropdown-menu {

    display: block;

   }

 

   .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: #ccc;

    margin-top: 5px;

    margin-right: -10px;

   }

 

   .dropdown-submenu:hover > a:after {

    border-left-color: #fff;

   }

 

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

    }

 

 

  

   

Bootstrap 3多级下拉菜单

   


   

    

     下拉多级菜单

    

    

     

      总经理

      

       

  • 经理1
  •        

  • 经理2
  •       

         

         

          研发部

          

           

  • 主管
  •        

           

            员工

            

             

  • 互    评
  •          

  • 不互评
  •         

           

          

         

        

       

      

     

     

    热门栏目