我的悬停下拉菜单隐藏在内容（图像）后面。 我也使用z-index。 但没有得到例外的结果

Question

我使用codeigniter为我的照相馆创建了一个导航菜单，并使用fancybox弹出图像。 但是，当我在菜单中使用下拉菜单时，下拉菜单部分转到图像后面，我在css中使用了z-index但没有任何解决方案。 我给我的代码和屏幕简短。 请帮我。

我的导航的HTML代码：

<div id='cssmenu'>
        <ul>
            <li><a href="<?php echo base_url(); ?>">Home</a></li>
            <li><a href="<?php echo base_url(); ?>gallery/official">Official Photo</a></li>
            <li><a href="<?php echo base_url(); ?>gallery/program">Program</a></li>
            <li ><a href="#">Foreign Photo</a>
                <ul class="sub-menu" >
                    <li><a href="#">Test</a></li>
                    <li><a href="#">Test1</a></li>
                    <li><a href="#">Test2</a></li>
                </ul>
            </li>
            <li><a href="<?php echo base_url(); ?>upload">Upload</a></li>
            <li><a href="#">Contact</a></li>
        </ul>
      </div>

我的HTML代码的内容：

<div class="row">
    <?php foreach ($image as $value) { ?>
    <div class="col-md-3 pic"><a class="fancybox" rel="gallery1" href="<?php echo base_url() . "gallery/$value->name" ; ?>" title="<?php echo $value->name; ?>"><img class="pici" src="<?php echo base_url() . "gallery/$value->name" ;?>" height="140" width="100%" ></a></div>
    <?php } ?>
</div>

我的CSS代码是：

 #cssmenu, #cssmenu ul, #cssmenu ul li, #cssmenu ul li a, #cssmenu #menu-button { margin: 0; padding: 0; border: 0; list-style: none; line-height: 1; display: block; position: relative; -webkit-box-sizing: border-box; -moz-box-sizing: border-box; box-sizing: border-box; } #cssmenu:after, #cssmenu > ul:after { content: "."; display: block; clear: both; visibility: hidden; line-height: 0; height: 0; } #cssmenu #menu-button { display: none; } #cssmenu { width: auto; font-family: Raleway, sans-serif; line-height: 1; float: left; height: 44px; } #cssmenu > ul { /*background: #3db2e1;*/ } #cssmenu > ul > li { float: left; -webkit-perspective: 1000px; -moz-perspective: 1000px; perspective: 1000px; } #cssmenu.align-center > ul { font-size: 0; text-align: center; } #cssmenu.align-center > ul > li { display: inline-block; float: none; } #cssmenu.align-right > ul > li { float: right; } #cssmenu > ul > li > a { padding: 16px 20px; margin: 0 2px; font-size: 12px; color: #ffffff; letter-spacing: 1px; /*text-transform: uppercase;*/ text-decoration: none; background: #008000; -webkit-transition: all .3s; -moz-transition: all .3s; -o-transition: all .3s; transition: all .3s; -webkit-transform-origin: 50% 0; -moz-transform-origin: 50% 0; transform-origin: 50% 0; -webkit-transform-style: preserve-3d; -moz-transform-style: preserve-3d; transform-style: preserve-3d; } #cssmenu > ul > li.active > a { color: #dff2fa; } #cssmenu > ul > li:hover > a, #cssmenu > ul > li > a:hover { /* color: #dff2fa; -webkit-transform: rotateX(90deg) translateY(-23px); -moz-transform: rotateX(90deg) translateY(-23px); transform: rotateX(90deg) translateY(-23px); -ms-transform: none;*/ } #cssmenu > ul > li > a::before { position: absolute; top: 100%; left: 0; z-index: -1; -webkit-box-sizing: border-box; -moz-box-sizing: border-box; box-sizing: border-box; width: 100%; height: 100%; padding: 16px 20px; color: #dff2fa; background: #19799f; content: attr(data-title); -webkit-transition: background 0.3s; -moz-transition: background 0.3s; transition: background 0.3s; -webkit-transform: rotateX(-90deg); -moz-transform: rotateX(-90deg); transform: rotateX(-90deg); -webkit-transform-origin: 50% 0; -moz-transform-origin: 50% 0; transform-origin: 50% 0; /*-ms-transform: translateY(- -18px);*/ } #cssmenu > ul > li:hover > a::before, #cssmenu > ul > li > a:hover::before { background: #3db2e1; } #cssmenu.small-screen { width: 100%; } #cssmenu.small-screen > ul, #cssmenu.small-screen.align-center > ul { width: 100%; text-align: left; } #cssmenu.small-screen > ul > li, #cssmenu.small-screen.align-center { float: none; display: block; border-top: 1px solid rgba(100, 100, 100, 0.1); } #cssmenu.small-screen > ul > li:hover > a, #cssmenu.small-screen > ul > li > a:hover { color: #dff2fa; -webkit-transform: none; -moz-transform: none; transform: none; -ms-transform: none; } #cssmenu.small-screen > ul > li > a::before { display: none; } #cssmenu.small-screen #menu-button { display: block; padding: 16px 20px; cursor: pointer; font-size: 14px; text-decoration: none; color: #ffffff; text-transform: uppercase; letter-spacing: 1px; background: #008000; } #cssmenu.small-screen #menu-button:after { content: ""; position: absolute; right: 20px; top: 17px; display: block; -webkit-box-sizing: content-box; -moz-box-sizing: content-box; box-sizing: content-box; border-top: 2px solid #ffffff; border-bottom: 2px solid #ffffff; width: 22px; height: 3px; } #cssmenu.small-screen #menu-button.menu-opened:after { border-top: 2px solid #dff2fa; border-bottom: 2px solid #dff2fa; } #cssmenu.small-screen #menu-button:before { content: ""; position: absolute; right: 20px; top: 27px; display: block; width: 22px; height: 2px; background: #ffffff; } #cssmenu.small-screen #menu-button.menu-opened:before { background: #dff2fa; } #cssmenu > ul > li > ul > li { display: none;} #cssmenu > ul > li:hover ul > li {display: block;padding: 8px 10px; background-color: #008000;color:#fff;overflow: visible;} #cssmenu ul li ul li a{color:#fff;font-size: 12px;} #cssmenu ul li ul li{border: 1px solid #fff;} 

Answer 1

导航栏div父对象应为position：relative，并且其z-index大于照片画廊父对象的容器，后者的容器也应为position：relative。 这可能会解决问题。