css位置下拉菜單問題

Question

我有一個菜單出現在橫幅後面。我需要在橫幅上展示它。

通過消除：

.ei-slider-large li{ 
    position: absolute; 
} 

其解決問題，但隨後的旗幟，是行不通的。

下面是我實現的細節：

菜單：

<div id='cssmenu'> 
    <ul> 
     <li class='active'><a href='index.php'><span>Home</span></a></li> 
     <li class='has-sub'><a href='#'><span>About Us</span></a> 
      <ul> 
       <li><a href="our_story.php"><span>Our Story</span></a></li> 
       <li><a href="our_team.php"><span>Our Leadership Team</span></a></li> 
       <li><a href="testimonials.php"><span>Testimonials</span></a></li> 
      </ul> 
     </li> 
     <li class='has-sub '><a href='#'><span>Our Services</span></a> 
      <ul> 
       <li><a href='geopolitical.php'><span>Geo-Political Risk Management</span></a></li> 
       <li><a href='security.php'><span>Security & Business Continuity</span></a></li> 
       <li><a href='business.php'><span>Business Resiliency</span></a></li> 
       <li><a href='integrity.php'><span>Integrity & Assurance</span></a></li> 
      </ul> 
     </li> 
     <li class='has-sub '><a href='#'><span>Insights</span></a> 
      <ul> 
       <li><a href='alerts_ads.php'><span>Alerts & Advisories</span></a></li> 
       <li><a href='research.php'><span>Research</span></a></li> 
       <li><a href='news_events.php'><span>News & Events</span></a></li> 
      </ul> 
     </li> 
     <li><a href='csr.php'><span>CSR</span></a></li> 
     <li class='has-sub '><a href='#'><span>Contact Us</span></a> 
      <ul> 
       <li><a href='our_office.php'><span>Our Offices</span></a></li> 
      </ul> 
     </li> 
    </ul> 
</div> 

菜單CSS：

 #cssmenu:after, 
    #cssmenu ul:after { 
     display: block; 
     clear: both; 
    } 

    #cssmenu a { 
     color: #333; 
     display: inline-block; 
     font-size: 15px; 
     font-weight:bold; 
     padding: 0 20px; 
     margin-left:10px; 
     margin-right:10px; 
     text-decoration: none; 
    border:1px solid #FFF; 

    } 
    #cssmenu a:hover { 
     position: relative; 
     top: 0; 
    } 
    #cssmenu ul { 
     list-style: none; 
    } 
    #cssmenu > ul { 

     width: 100%; 
    } 
    #cssmenu > ul > li { 
     float: left; 
     padding: 0 10px; 
     position: relative; 
    } 
    #cssmenu > ul > li.active a { 
     background: #FFF; 
     border-radius: 4px 4px 0 0; 
     -moz-border-radius: 4px 4px 0 0; 
     -webkit-border-radius: 4px 4px 0 0; 
     position: relative; 
     color:#569C17; 
     border:1px solid #CCC; 
    } 
    #cssmenu > ul > li.active a:hover { 
     background: #FFF; 
     border-radius: 4px 4px 0 0; 
     -moz-border-radius: 4px 4px 0 0; 
     -webkit-border-radius: 4px 4px 0 0; 
     position: relative; 
     color:#569C17; 

    } 
    #cssmenu > ul > li.has-sub-active > a { 
    background: #FFF; 
     border-radius: 4px 4px 0 0; 
     -moz-border-radius: 4px 4px 0 0; 
     -webkit-border-radius: 4px 4px 0 0; 
     position: relative; 
     display: block; 
     color:#569C17; 
     border:1px solid #CCC; 
    } 

    #cssmenu .has-sub-active:hover ul { 
     display: block; 
    } 
    #cssmenu .has-sub-active a { 
     display: block; 
     position: relative; 
    } 
    #cssmenu .has-sub-active a:after { 

    } 
    #cssmenu .has-sub-active ul { 
     background: #FFF; 
     display: none; 
     padding: 10px 0; 
     position: absolute; 
     left: 50%; 
     top: 41px; 
     margin-left: -70px; 
     width: 200px; 
     z-index: 1; 
     border-bottom:1px solid #CCC; 
     border-left:1px solid #CCC; 
     border-right:1px solid #CCC; 
    } 
    #cssmenu .has-sub-active ul li:hover > a { 
     background: #dddddd; 
     color: #569C17; 
     font-size:12px; 
    } 
    #cssmenu .has-sub-active ul a { 
     line-height: 100%; 
     padding: 8px 0; 
     font-size:12px; 
     color:#333; 
    } 

    #cssmenu > ul > li:hover > a { 
     background: #FFF; 
     border-radius: 4px 4px 0 0; 
     -moz-border-radius: 4px 4px 0 0; 
     -webkit-border-radius: 4px 4px 0 0; 
     position: relative; 
     color:#569C17; 
     border-top:1px solid #CCC; 
     border-left:1px solid #CCC; 
     border-right:1px solid #CCC; 

    } 
    #cssmenu > ul > li a { 
     line-height: 39px; 
    } 
    #cssmenu > ul > li a:hover { 
    } 
    #cssmenu .has-sub:hover ul { 
     display: block; 
    } 
    #cssmenu .has-sub a { 
     display: block; 
     position: relative; 
    } 
    #cssmenu .has-sub a:after { 

    } 
    #cssmenu .has-sub ul { 
     background: #FFF; 
     display: none; 
     padding: 10px 0; 
     position: absolute; 
     left: 50%; 
     top: 41px; 
     margin-left: -70px; 
     width: 200px; 
     z-index: 1; 
     border-bottom:1px solid #CCC; 
     border-left:1px solid #CCC; 
     border-right:1px solid #CCC; 
    } 
    #cssmenu .has-sub ul li:hover > a { 
     background: #dddddd; 
     color: #569C17; 
     font-size:12px; 
    } 
    #cssmenu .has-sub ul a { 
     line-height: 100%; 
     padding: 8px 0; 
     font-size:12px; 
     color:#333; 
    } 

橫幅：

<div id="ei-slider" class="ei-slider"> 
    <ul class="ei-slider-large"> 
     <li> <img src="images/large/1.jpg" alt="image01" /> 
      <div class="ei-title"> 
       <h3>Geo-Political Risk Management</h3> 
      </div> 
     </li> 
     <li> <a href="news_events.php"><img src="images/large/2.jpg" alt="image02" /></a> 
      <div class="ei-title"> 
       <h3>Security & Business Continuity</h3> 
      </div> 
     </li> 
     <li> <img src="images/large/3.jpg" alt="image03"/> 
      <div class="ei-title"> 
       <h3>Business Resiliency</h3> 
      </div> 
     </li> 
     <li> <img src="images/large/4.jpg" alt="image04"/> 
      <div class="ei-title"> 
       <h3>Integrity & Assurance</h3> 
      </div> 
     </li> 
    </ul><!-- ei-slider-large --> 
    <ul class="ei-slider-thumbs"> 
     <li class="ei-slider-element">Current</li> 
     <li><a href="#">Slide 1</a><img src="images/thumbs/1.jpg" alt="thumb01" /></li> 
     <li><a href="#">Slide 2</a><img src="images/thumbs/2.jpg" alt="thumb02" /></li> 
     <li><a href="#">Slide 3</a><img src="images/thumbs/3.jpg" alt="thumb03" /></li> 
     <li><a href="#">Slide 4</a><img src="images/thumbs/4.jpg" alt="thumb04" /></li> 
    </ul> 
    <!-- ei-slider-thumbs --> 
</div><!-- ei-slider --> 

旗幟CSS：

 .ei-slider{ 
     position: relative; 
     width: 100%; 
     max-width: 1920px; 
     height: 400px; 
     margin: 0 auto; 
    } 
    .ei-slider-loading{ 
     width: 100%; 
     height: 100%; 
     position: absolute; 
     top: 0px; 
     left: 0px; 
     z-index:999; 
     color: #fff; 
     text-align: center; 
     line-height: 400px; 
    } 
    .ei-slider-large{ 
     height: 100%; 
     width: 100%; 
     position:relative; 
     overflow: hidden; 
    } 
    .ei-slider-large li{ 
     position: absolute; 
     top: 0px; 
     left: 0px; 
     overflow: hidden; 
     height: 100%; 
     width: 100%; 
    } 
    .ei-slider-large li img{ 
     width: 100%; 
    } 
    .ei-title{ 
     position: absolute; 
     right: 50%; 
     margin-right: 13%; 
     top: 30%; 
    } 
    .ei-title h2, .ei-title h3{ 
     text-align: right; 
    } 
    .ei-title h2{ 
     font-size: 40px; 
     line-height: 50px; 
     font-family: 'Playfair Display', serif; 
     font-style: italic; 
     color: #b5b5b5; 
    } 
    .ei-title h3{ 
     font-size: 30px; 
     line-height: 70px; 
     font-family: 'Open Sans Condensed', sans-serif; 
     text-transform: uppercase; 
     color: #000; 
    } 
    .ei-slider-thumbs{ 
     height: 13px; 
     margin: 0 auto; 
     position: relative; 
    } 
    .ei-slider-thumbs li{ 
     position: relative; 
     float: left; 
     height: 100%; 
    } 
    .ei-slider-thumbs li.ei-slider-element{ 
     top: 0px; 
     left: 0px; 
     position: absolute; 
     height: 100%; 
     z-index: 10; 
     text-indent: -9000px; 
     background: #000; 
     background: rgba(0,0,0,0.9); 
    } 
    .ei-slider-thumbs li a{ 
     display: block; 
     text-indent: -9000px; 
     background: #666 ; 
     width: 100%; 
     height: 100%; 
     cursor: pointer; 
     -webkit-box-shadow: 
      0px 1px 1px 0px rgba(0,0,0,0.3), 
      0px 1px 0px 1px rgba(255,255,255,0.5); 
     -moz-box-shadow: 
      0px 1px 1px 0px rgba(0,0,0,0.3), 
      0px 1px 0px 1px rgba(255,255,255,0.5); 
     box-shadow: 
      0px 1px 1px 0px rgba(0,0,0,0.3), 
      0px 1px 0px 1px rgba(255,255,255,0.5); 
     -webkit-transition: background 0.2s ease; 
     -moz-transition: background 0.2s ease; 
     -o-transition: background 0.2s ease; 
     -ms-transition: background 0.2s ease; 
     transition: background 0.2s ease; 
    } 
    .ei-slider-thumbs li a:hover{ 
     background-color: #f0f0f0; 
    } 
    .ei-slider-thumbs li img{ 
     position: absolute; 
     bottom: 50px; 
     opacity: 0; 
     z-index: 999; 
     max-width: 100%; 
     -webkit-transition: all 0.4s ease; 
     -moz-transition: all 0.4s ease; 
     -o-transition: all 0.4s ease; 
     -ms-transition: all 0.4s ease; 
     transition: all 0.4s ease; 
     -webkit-box-reflect: 
      below 0px -webkit-gradient(
       linear, 
       left top, 
       left bottom, 
       from(transparent), 
       color-stop(50%, transparent), 
       to(rgba(255,255,255,0.3)) 
       ); 
     -ms-filter: "progid:DXImageTransform.Microsoft.Alpha(Opacity=0)"; 
    } 
    .ei-slider-thumbs li:hover img{ 
     opacity: 1; 
     bottom: 13px; 
     -ms-filter: "progid:DXImageTransform.Microsoft.Alpha(Opacity=100)"; 
    } 

Answer 1

的問題是在你的z-index。

正如你所看到的，你給你的#cssmenu .has-sub ul { z-index:1; }

而且你.ei-slider-thumbs li img { z-index:999; }

試試你的菜單中的z-index設置爲9999或降低/消除你的滑塊的z-index。