javascript - 菜单重叠在 slider 上

Question

由于菜单上的 slider 重叠，菜单被隐藏。无法看到我的菜单。菜单 - 类(class)不可见。我正在使用 jssora22l，它在我的类(class)选项卡下的菜单“类(class)”上重叠。尝试使用 z 索引 1000，但我仍然没有得到菜单。

代码

https://codepen.io/krishnakernel/pen/YNzppX

<header class="headerpart">
   <div class="container">
      <div class="logo">
         <a href="#">
         <img class="abc" src="images-Logo.png" alt="krishnamohan" height="50" width="235" />
         </a>
      </div>
      <div class="menu" >
         <nav>
            <ul>
               <li><a href="#">Home</a></li>
               <li>
                  <a href="#">Courses</a>
                  <ul>
                     <li><a href="#">Lesson</a></li>
                     <li><a href="#">Practicals</a></li>
                     <li><a href="#">Projects</a></li>
                  </ul>
               </li>
               <li><a href="#">Contact</a></li>
               <li><a href="url">login</a></li>
               <li><a href="url">Sign up</a></li>
            </ul>
         </nav>
      </div>
   </div>
</header>
<div id="jssor_1" style="position: relative; margin: 0 auto; top: 0px; left: 0px; width: 1300px; height: 500px; overflow: hidden; visibility: hidden;">
   <!-- Loading Screen -->
   <div data-u="loading" style="position: absolute; top: 0px; left: 0px;">
      <div style="filter: alpha(opacity=70); opacity: 0.7; position: absolute; display: block; top: 0px; left: 0px; width: 100%; height: 100%;"></div>
      <div style="position:absolute;display:block;background:url('img/loading.gif') no-repeat center center;top:0px;left:0px;width:100%;height:100%;"></div>
   </div>
   <div data-u="slides" style="cursor: default; position: relative; top: 0px; left: 0px; width: 1300px; height: 500px; overflow: hidden;">
      <div data-p="225.00">
         <img data-u="image" src="img/red.jpg" />
         <div style="position:absolute;top:30px;left:30px;width:480px;height:120px;z-index:0;font-size:50px;color:#ffffff;line-height:60px;">TOUCH SWIPE SLIDER</div>
         <div style="position:absolute;top:300px;left:30px;width:480px;height:120px;z-index:0;font-size:30px;color:#ffffff;line-height:38px;">Build your slider with anything, includes image, content, text, html, photo, picture</div>
         <div data-u="caption" data-t="0" style="position:absolute;top:120px;left:650px;width:470px;height:220px;z-index:0;">
            <img style="position:absolute;top:0px;left:0px;width:470px;height:220px;z-index:0;" src="img/c-phone-horizontal.png" />
            <div style="position:absolute;top:4px;left:45px;width:379px;height:213px;z-index:0; overflow: hidden;">
               <img data-u="caption" data-t="1" style="position:absolute;top:0px;left:0px;width:379px;height:213px;z-index:0;" src="img/c-slide-1.jpg" />
               <img data-u="caption" data-t="2" style="position:absolute;top:0px;left:379px;width:379px;height:213px;z-index:0;" src="img/c-slide-3.jpg" />
            </div>
            <img style="position:absolute;top:4px;left:45px;width:379px;height:213px;z-index:0;" src="img/c-navigator-horizontal.png" />
            <img data-u="caption" data-t="3" style="position:absolute;top:740px;left:1600px;width:257px;height:300px;z-index:0;" src="img/c-finger-pointing.png" />
         </div>
      </div>
      <div data-p="225.00" style="display: none;">
         <img data-u="image" src="img/purple.jpg" />
      </div>
      <div data-p="225.00" data-po="80% 55%" style="display: none;">
         <img data-u="image" src="img/blue.jpg" />
      </div>
      <a data-u="any" href="" style="display:none">Full Width Slider</a>
   </div>
   <!-- Bullet Navigator -->
   <div data-u="navigator" class="jssorb05" style="bottom:16px;right:16px;" data-autocenter="1">
      <!-- bullet navigator item prototype -->
      <div data-u="prototype" style="width:16px;height:16px;"></div>
   </div>
   <!-- Arrow Navigator -->
   <span data-u="arrowleft" class="jssora22l" style="top:0px;left:8px;width:40px;height:58px;" data-autocenter="2"></span>
   <span data-u="arrowright" class="jssora22r" style="top:0px;right:8px;width:40px;height:58px;" data-autocenter="2"></span>
</div>

https://codepen.io/krishnakernel/pen/YNzppX

屏幕截图

Answer 1

正如许多人指出的那样，这可能是一个 z-index 问题，您应该将以下内容添加到您的 css:

.headerpart {
   position: relative;
   z-index: 1;
}

菜单 div 需要更高的 z-index 和 position: relative; 或 position: absolute; 才能使 z-index 起作用。

.headerpart .menu {
   z-index: 2; /* higher z-index for the menu div */
}

我还从您的代码笔中注意到 > .jssorb05 div, .jssorb05 div:hover, .jssorb05 .av 的值为 overflow: hidden; 这也可能可能会导致问题。您可能需要将其更改为 overflow: visible; 或 overflow: auto;

提供的 codepen 没有多大帮助，因为您还没有为菜单 HTML 添加样式。