layUI实现三级导航菜单效果

本文实例为大家分享了layUI实现三级导航菜单展示的具体代码，供大家参考，具体内容如下

废话不多说，直接上代码：

 
 
 
 
 
 
 .layui-layout-left{position: absolute !important; left: 0px; top: 0;}
 
 .layui-nav-child{display: none; position: absolute; left: 0; top: 65px; min-width: 100%; line-height: 36px; padding: 5px 0; box-shadow: 0 2px 4px rgba(0,0,0,.12); border: 1px solid #d2d2d2; background-color: #fff; z-index: 100; border-radius: 2px; white-space: nowrap;}
 .layui-nav .layui-nav-child a{color: white;}
 .layui-nav .layui-nav-child a:hover{background-color:deepskyblue; color: white;}
 .layui-nav-child dd{position: relative;}
 .layui-nav-child dd.layui-this{background-color: transparent; color: white;}
 .layui-nav .layui-nav-child dd.layui-this a{background-color: transparent; color: white;}
 .layui-nav-child dd.layui-this:after{display: none;}
 
 .layui-nav-third-child{display: none; position: absolute; left: 105px;top:25px;min-width: 100%; line-height: 36px; padding: 5px 0; box-shadow: 0 2px 4px rgba(0,0,0,.12); border: 1px solid #d2d2d2; background-color: #fff; z-index: 100; border-radius: 2px; white-space: nowrap;}
 .layui-nav .layui-nav-third-child a{color: white;}
 .layui-nav .layui-nav-third-child a:hover{background-color:deepskyblue; color: white;}
 .layui-nav-third-child li{position: relative;}
 .layui-nav-third-child li{background-color: transparent; color: white;}
 .layui-nav .layui-nav-third-child li.layui-this a{background-color: transparent; color: white;}
 .layui-nav-third-child li:after{display: none;}
 




 
  
  船信保密安全综合管控平台

  CSIT integrated Control System of Confidentiality and Security

  
 

 

  

  
   
   贤心
  
  

   
基本资料
   
安全设置
  
  
  
退了
 
 
 
 
 

  
控制台
  
商品管理
  
用户
  

  其它系统
  

   
邮件管理
   
消息管理
   
授权管理
   

   其它系统2
   

    
邮件管理2
    
消息管理2
    
授权管理2
   
   
   

   其它系统3
   

    
邮件管理3
    
消息管理3
    
授权管理3
   
   

  
  
 
 
 
 
 内容主体区域
 

 
 
 © layui.com - 底部固定区域
 

style中是重写了layui的全局样式，为了调节需要的颜色可忽略，思路是依照layui样式的显现关系，通过控制third-child的显示隐藏达到三级菜单的目的。需要引用小箭头的只需引入layui-tab-more，建议去看看他的实现方式，作为一个javaer我是没想到小三角还能如此简单的实现。

以上就是本文的全部内容，希望对大家的学习有所帮助，也希望大家多多支持考高分网。