Question

由于菜单上的滑块重叠，菜单被隐藏。无法查看我的菜单。菜单 - 课程不可见。我正在使用jssora22l，它在我的菜单上重叠了＃Less;＆＃39; Lessons＆＃39;在课程的选项卡下。尝试使用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 */
}

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

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

Answer 2

将 z-index 设置为标题。不要忘记为z-index工作的标题添加相对位置。

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

Answer 3

这是z-index问题给菜单栏的z-index值高，尝试下面的z-index值到菜单类

SELECT GROUP_CONCAT(rifDoc), idUser, user, dateDoc
FROM
(
SELECT GROUP_CONCAT(CAR.rifDoc) AS rifDoc, CAR.idUser, CAR.user, CARDETT.dateDoc
FROM car AS CAR, carDett AS CARDETT 
WHERE CAR.id>0 CAR.id=CARDETT.idDoc CARDETT.dateDoc<='2017-01-31' 
GROUP BY idUser, dateDoc) As T1

UNION ALL

(SELECT GROUP_CONCAT(BK.rifDoc) AS rifDoc, BK.idUser, BK.user, GROUP_CONCAT(BK.inUso) AS inUso, GROUP_CONCAT(BK.inCarico) AS inCarico, BKDETT.dateDoc
FROM bike AS BK, bikeDett AS BKDETT 
WHERE BK.id>0 AND BK.id=BKDETT.idDoc AND BKDETT.dateDoc<='2017-01-31' 
GROUP BY idUser, dateDoc
 )As T2)

GROUP BY idUser, dateDoc

菜单重叠在滑块上

4 个答案: