我原先的导航是二级导航。因项目需要，现在要在右侧导航栏添加三级导航，查找了很多资料，都是用div里面ul li写的示例，而我的导航里面需要a标签嵌套文字实现跳转功能。所以我在需要三级导航的a标签里面再次嵌套了一个a标签。如下示例：
<li class="layui-nav-item" pc> <a href="javascript:;"> <i class="layui-icon"><cite>使用说明</cite></i> </a> <div class="layui-nav-child"> <dd><a href="javascript:;" data-url="${path }/workorder/workinstructions"> <i class="iconfont1 icon-iconzhanghunor01" data-icon="icon-iconzhanghunor01"> </i> <cite>工单系统</cite> </a> </dd> <dd><a href="javascript:;" data-url="${path }/waitthing/waitinstructions"> <i class="iconfont1 icon-remind" data-icon="icon-remind"></i> <cite>待办事务</cite> </a> </dd> <dd> <div> <a href="javascript:;"> <i class="iconfont1 icon-shengchanguanlixitong" data-icon="icon-shengchanguanlixitong"></i> <cite>生产管理</cite> <div style="position: absolute;height:40px;left:115px;top:0px; border:1px solid rgba(0,0,0,0.18);background: #FFFFFF"> <a href="javascript:;" data-url="${path}/production/YieldInformation"> <i class="iconfont1 icon-shengchanguanlixitong" data-icon="icon-shengchanguanlixitong"></i> <cite>产量信息</cite> </a> </div> </a> </div> </dd> </div> </li>三级导航是出来了，但是跳转链接失效。因为a标签是内联元素，如果嵌套了a标签，浏览器会自动添加结束符号，所以不能嵌套使用
--如果a标签里面再嵌套a标签-- 如：<a>示例1 <a>示例2</a> <a> --则解析出来的内容是：-- <a>示例1</a> <a>示例2</a>如果一定要使用a标签嵌套，最简单的方法就是在里层的a标签外再使用object嵌套，这样就解决了，不过object标签也有一个弊端，在IE8浏览器里面，不支持object标签
<dd> <div> <a href="javascript:;"> <i class="iconfont1 icon-shengchanguanlixitong" data-icon="icon-shengchanguanlixitong"></i> <cite>生产管理</cite> <object style="position: absolute;height:40px;left:115px;top:0px; border:1px solid rgba(0,0,0,0.18);background: #FFFFFF"> <a href="javascript:;" data-url="${path}/production/YieldInformation"> <i class="iconfont1 icon-shengchanguanlixitong" data-icon="icon-shengchanguanlixitong"></i> <cite>产量信息</cite> </a> </object> </a> </div> </dd>那么可以使用第二种方法：
1，给a标签添加样式（display：inline-block）把内联元素改为行内块元素(里层a标签） 2，设置宽高，设置绝对定位(里层a标签） 3，调整里层的a标签和外层的a标签的z-index值，让我们可以正确点击需要点击的位置。
这样也能解决问题，不过如果不需要兼容IE8浏览器的话，还是建议使用第一种方法比较简单。
