layui二级导航栏被遮挡

提问 未结 4 122
TouchLiu
TouchLiu VIP3 2020-2-20
悬赏:80飞吻
版本:模板市场 浏览器:

如图,添加二级菜单,被遮挡无法显示、用了z-index也不行
使用的模板:https://fly.layui.com/store/layuiNetCompany
增加的代码(二级菜单那部分):
<!-- nav部分 -->
<div class="nav index">
<div class="layui-container">
<!-- 公司logo -->
<div class="nav-logo">
<a href="index.html">
<img src="../res/static/img/logo.png" alt="网络公司">
</a>
</div>
<div class="nav-list">
<button>
<span>111</span><span></span><span></span>
</button>
<ul class="layui-nav" lay-filter="">
<li class="layui-nav-item"><a href="product.html">产品</a>
<!--增加代码,增加二级菜单-->
<dl class="layui-nav-child">
<dd><a href="#">选项一</a></dd>
<dd><a href="#">选项二</a></dd>
<dd><a href="#">选项三</a></dd>
<dd><a href="">跳转项</a></dd>
</dl>
</li>

<li class="layui-nav-item"><a href="news.html">动态</a></li>
<li class="layui-nav-item"><a href="case.html">案例</a></li>
<li class="layui-nav-item"><a href="about.html">关于</a></li>
<li class="layui-nav-item"><a href="https://fly.layui.com/store/" target="_blank">模板</a></li>
</ul>
</div>
</div>
</div>

index.html页面全部代码:
<!DOCTYPE html>
<html lang="en">

<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width,user-scalable=no,initial-scale=1.0,maximum-scale=1.0,minimum-scale=1.0">
<title>网络公司-首页</title>
<link rel="stylesheet" href="../res/layui/css/layui.css">
<link rel="stylesheet" href="../res/static/css/index.css">
</head>

<body>
<!-- nav部分 -->
<div class="nav index">
<div class="layui-container">
<!-- 公司logo -->
<div class="nav-logo">
<a href="index.html">
<img src="../res/static/img/logo.png" alt="网络公司">
</a>
</div>
<div class="nav-list">
<button>
<span>111</span><span></span><span></span>
</button>
<ul class="layui-nav" lay-filter="">
<li class="layui-nav-item"><a href="product.html">产品</a>
<!--增加二级菜单-->
<dl class="layui-nav-child">
<dd><a href="#">选项一</a></dd>
<dd><a href="#">选项二</a></dd>
<dd><a href="#">选项三</a></dd>
<dd><a href="">跳转项</a></dd>
</dl>
</li>

<li class="layui-nav-item"><a href="news.html">动态</a></li>
<li class="layui-nav-item"><a href="case.html">案例</a></li>
<li class="layui-nav-item"><a href="about.html">关于</a></li>
<li class="layui-nav-item"><a href="https://fly.layui.com/store/" target="_blank">模板</a></li>
</ul>
</div>
</div>
</div>
<!-- banner部分 -->
<div>
<div class="layui-carousel" id="banner">
<div carousel-item>
<div>
<img src="../res/static/img/banner1.jpg">
<div class="panel">
<p class="title">网络公司</p>
<p>完美前端体验</p>
</div>
</div>
<div>
<img src="../res/static/img/banner2.jpg">
<div class="panel">
<p class="title">网络公司</p>
<p>完美前端体验</p>
</div>
</div>
</div>
</div>
</div>
<!-- main部分 -->
<div class="main-product">
<div class="layui-container">
<p class="title">专为前端而研制的<span>核心产品</span></p>
<div class="layui-row layui-col-space25">
<div class="layui-col-sm6 layui-col-md3">
<div class="content">
<div><img src="../res/static/img/Big_icon1.png"></div>
<div>
<p class="label">JS基础库</p>
<p>从小屏逐步扩展到大屏,最终实现所有屏幕适配,适应移动互联潮流。</p>
</div>
<a href="javascript:;">查看产品 ></a>
</div>
</div>
<div class="layui-col-sm6 layui-col-md3 ">
<div class="content">
<div><img src="../res/static/img/Big_icon2.png"></div>
<div>
<p class="label">CSS处理</p>
<p>从小屏逐步扩展到大屏,最终实现所有屏幕适配,适应移动互联潮流。</p>
</div>
<a href="javascript:;">查看产品 ></a>
</div>
</div>
<div class="layui-col-sm6 layui-col-md3 ">
<div class="content">
<div><img src="../res/static/img/Big_icon3.png"></div>
<div>
<p class="label">兼容性</p>
<p>从小屏逐步扩展到大屏,最终实现所有屏幕适配,适应移动互联潮流。</p>
</div>
<a href="javascript:;">查看产品 ></a>
</div>
</div>
<div class="layui-col-sm6 layui-col-md3 ">
<div class="content">
<div><img src="../res/static/img/Big_icon4.png"></div>
<div>
<p class="label">响应式</p>
<p>从小屏逐步扩展到大屏,最终实现所有屏幕适配,适应移动互联潮流。</p>
</div>
<a href="javascript:;">查看产品 ></a>
</div>
</div>
</div>
</div>
</div>
<div class="main-service">
<div class="layui-container">
<p class="title">为客户打造完美的<span>专业服务</span></p>
<div class="layui-row layui-col-space25 layui-col-space80">
<div class="layui-col-sm6">
<div class="content">
<div class="content-left"><img src="../res/static/img/home_img1.jpg"></div>
<div class="content-right">
<p class="label">1 对 1 前端指导</p>
<span></span>
<p>更有多个包含不同主题的Web组件,可快速构建界面出色、体验优秀的跨屏页面,大幅提升开发效率。</p>
</div>
</div>
</div>
<div class="layui-col-sm6">
<div class="content">
<div class="content-left"><img src="../res/static/img/home_img2.jpg"></div>
<div class="content-right">
<p class="label">1 对 1 前端指导</p>
<span></span>
<p>更有多个包含不同主题的Web组件,可快速构建界面出色、体验优秀的跨屏页面,大幅提升开发效率。</p>
</div>
</div>
</div>
<div class="layui-col-sm6">
<div class="content">
<div class="content-left"><img src="../res/static/img/home_img3.jpg"></div>
<div class="content-right">
<p class="label">1 对 1 前端指导</p>
<span></span>
<p>更有多个包含不同主题的Web组件,可快速构建界面出色、体验优秀的跨屏页面,大幅提升开发效率。</p>
</div>
</div>
</div>
<div class="layui-col-sm6">
<div class="content">
<div class="content-left"><img src="../res/static/img/home_img4.jpg"></div>
<div class="content-right">
<p class="label">1 对 1 前端指导</p>
<span></span>
<p>更有多个包含不同主题的Web组件,可快速构建界面出色、体验优秀的跨屏页面,大幅提升开发效率。</p>
</div>
</div>
</div>
</div>
<div class="service-more"><a href="">查看更多</a></div>
</div>
</div>
<!-- footer部分 -->
<div class="footer">
<div class="layui-container">
<p class="footer-web">
<a href="javascript:;">合作伙伴</a>
<a href="javascript:;">企业画报</a>
<a href="javascript:;">JS网</a>
<a href="javascript:;">千图网</a>
<a href="javascript:;">昵图网</a>
<a href="javascript:;">素材网</a>
<a href="javascript:;">花瓣网</a>
</p>
<div class="layui-row footer-contact">
<div class="layui-col-sm2 layui-col-lg1"><img src="../res/static/img/erweima.jpg"></div>
<div class="layui-col-sm10 layui-col-lg11">
<div class="layui-row">
<div class="layui-col-sm6 layui-col-md8 layui-col-lg9">
<p class="contact-top"><i class="layui-icon layui-icon-cellphone"></i> 400-8888888  (9:00-18:00)</p>
<p class="contact-bottom"><i class="layui-icon layui-icon-home"></i> 88888888@163.com</span>
</p>
</div>
<div class="layui-col-sm6 layui-col-md4 layui-col-lg3">
<p class="contact-top"><span class="right">该模板版权归 <a href="https://www.layui.com/" target="_blank">layui.com</a> 所有</span></p>
<p class="contact-bottom"><span class="right">Copyright © 2016-2018  ICP 备888888号</span></p>
</div>
</div>
</div>
</div>
</div>
</div>
<script src="../res/layui/layui.js"></script>
<!--[if lt IE 9]>
<script src="https://cdn.staticfile.org/html5shiv/r29/html5.min.js"></script>
<script src="https://cdn.staticfile.org/respond.js/1.4.2/respond.min.js"></script>
<![endif]-->
<script>
layui.config({
base: '../res/static/js/'
}).use('firm');
</script>
</body>

</html>
回帖
  • 云中客
    2020-2-21
    F12看看样式有没有 overflow:hidden,有了就去掉
    1 回复
  • style="z-index:9999;position: relative;"
    0 回复
  • @莫名其妙78
    <!-- nav部分 -->
    <div class="nav index" style="z-index:9999;position: relative;">
    <div class="layui-container">
    <!-- 公司logo -->
    <div class="nav-logo">
    <a href="index.html">
    <img src="../res/static/img/logo.png" alt="网络公司">
    </a>
    </div>
    <div class="nav-list">
    <button>
    <span>111</span><span></span><span></span>
    </button>
    <ul class="layui-nav" lay-filter="">
    <li class="layui-nav-item" style="z-index:9999;position: relative;"><a href="product.html">产品</a>
    <!--增加二级菜单-->
    <dl class="layui-nav-child">
    <dd><a href="#">选项一</a></dd>
    <dd><a href="#">选项二</a></dd>
    <dd><a href="#">选项三</a></dd>
    <dd><a href="">跳转项</a></dd>
    </dl>
    </li>

    <li class="layui-nav-item"><a href="news.html">动态</a></li>
    <li class="layui-nav-item"><a href="case.html">案例</a></li>
    <li class="layui-nav-item"><a href="about.html">关于</a></li>
    <li class="layui-nav-item"><a href="https://fly.layui.com/store/" target="_blank">模板</a></li>
    </ul>
    </div>
    </div>
    </div>
    加上之后还是被遮挡的
    0 回复
  • overflow:hidden去掉就可以了
    或者改成
    overflow:visible
    0 回复