下拉顯示在幻燈片放映菜單

Question

我有下拉菜單，使用CSS像個菜單： -

#primary_nav_wrap 
 
{ 
 
    background:url("../img/footer_lodyas.png")no-repeat center center fixed; 
 
    display:inline-block; 
 
    width:800px; 
 
} 
 

 
#primary_nav_wrap ul 
 
{ 
 
    list-style:none; 
 
    position:relative; 
 
    margin:0; 
 
    padding:0 
 
} 
 

 
#primary_nav_wrap ul a 
 
{ 
 
    display:block; 
 
    color:black; 
 
    text-decoration:none; 
 
    font-weight:bold; 
 
    font-size:15px; 
 
    line-height:50px; 
 
    padding:0 15px; 
 
    font-family:yekan,montserratAltenates; 
 
} 
 

 
#primary_nav_wrap ul li 
 
{ 
 
    position:relative; 
 
    display:inline-block; 
 
    float:right; 
 
    margin:0; 
 
    padding:0 
 
} 
 

 
#primary_nav_wrap ul li.current-menu-item 
 
{ 
 
    background:#ddd 
 
} 
 

 
#primary_nav_wrap ul li:hover 
 
{ 
 
    background:rgba(255, 153, 0, 0.7); 
 
} 
 

 
#primary_nav_wrap ul ul 
 
{ 
 
    display:none; 
 
    position:absolute; 
 
    top:100%; 
 
    left:0; 
 
    background:#fff; 
 
    padding:0 
 
} 
 

 
#primary_nav_wrap ul ul li 
 
{ 
 
    width:200px 
 
} 
 

 
#primary_nav_wrap ul ul a 
 
{ 
 
    line-height:120%; 
 
    padding:10px 15px 
 
} 
 

 
#primary_nav_wrap ul ul ul 
 
{ 
 
    top:0; 
 
    left:100% 
 
} 
 

 
#primary_nav_wrap ul li:hover > ul 
 
{ 
 
    display:block 
 
} 
 

 
    .slidshow_container{ 
 
    max-width:800px; 
 
    position:relative; 
 
    margin:0; 
 
    padding:0; 
 
} 
 

 
.mySlides{ 
 
    position:relative; 
 
    margin:0; 
 
    padding:0; 
 
} 
 

 
.numbertext{ 
 
    font-family:yekan,montserratAltenates; 
 
    font-size:15px; 
 
    position:absolute; 
 
    padding:10px; 
 
    color:white; 
 
} 
 

 
.prev,.next{ 
 
    cursor:pointer; 
 
    position:absolute; 
 
    padding:10px; 
 
    color:white; 
 
    margin:auto; 
 
    top:150px; 
 
    font-size:30px; 
 
    border-radius:0px 3px 3px 0px; 
 

 
} 
 

 
.next:hover{ 
 
    background:rgba(40,40,40,0.8); 
 
    border-radius:3px 0px 0px 3px; 
 

 
} 
 

 
.prev:hover{ 
 
    background:rgba(40,40,40,0.8); 
 
} 
 

 
.next{ 
 
    right:0; 
 
} 
 

 
.mySlides .text{ 
 
    font-family:yekan,montserratAltenates; 
 
    font-size:15px; 
 
    position:absolute; 
 
    bottom:0px; 
 
    padding:20px; 
 
    margin-bottom:5px; 
 
    width:800px; 
 
    text-align:center; 
 
    color:white; 
 
    background:rgba(35, 35, 35, 0.60); 
 
    overflow:hidden; 
 
}

<nav id="primary_nav_wrap"> 
 
      <ul> 
 
       <li class="current-menu-item"><a href="#">Home</a></li> 
 
       <li> 
 
        <a href="#">Category</a> 
 
        <ul> 
 
         <li><a href="#">Sub Menu 1</a></li> 
 
         <li><a href="#">Sub Menu 2</a></li> 
 
         <li><a href="#">Sub Menu 3</a></li>      
 
         <li><a href="#">Sub Menu 5</a></li> 
 
        </ul> 
 
       </li> 
 
       <li> 
 
        <a href="#">Contact us</a> 
 
        
 
       </li> 
 
       <li> 
 
        <a href="#">About us</a>     
 
       </li> 
 
      </ul> 
 
     </nav> 
 
    <br style="clear:both;" /> 
 
     <div class="slidshow_container"> 
 
      <div class="mySlides fade"> 
 
       <div class="numbertext">1/4</div> 
 
       <img src="~/Content/img/slideshow/image_1.jpg" style="width:100%;height:400px" /> 
 
       <div class="text">image 1</div> 
 
      </div> 
 

 
      <div class="mySlides fade"> 
 
       <div class="numbertext">2/4</div> 
 
       <img src="~/Content/img/slideshow/image_2.jpg" style="width:100%;height:400px" /> 
 
       <div class="text">image 2</div> 
 
      </div> 
 

 
      <div class="mySlides fade"> 
 
       <div class="numbertext">3/4</div> 
 
       <img src="~/Content/img/slideshow/image_3.jpg" style="width:100%;height:400px" /> 
 
       <div class="text">image 3</div> 
 
      </div> 
 

 
      <div class="mySlides fade"> 
 
       <div class="numbertext">4/ 4</div> 
 
       <img src="~/Content/img/slideshow/image_4.jpg" style="width:100%;height:400px" /> 
 
       <div class="text">image 4</div> 
 
      </div> 
 

 
      <a class="prev" onclick="plusSlides(-1)">&#10094;</a> 
 
      <a class="next" onclick="plusSlides(1)">&#10095;</a> 
 
     </div>

但是，當我將鼠標移動到該類別菜單的打擊名單獲得滑動菜單的像下面圖像的圖像下： -

所以，我怎麼能解決這個問題？

Answer 1

z-index將解決您的問題，

• 的Z-index屬性指定元素的堆疊順序。
• 具有較大堆棧順序的元素總是位於具有較低堆棧順序的元素 的前面。
• 注： z索引ONLY作品上定位元素（位置：絕對的， 位置：相對的，或位置是：固定）。

語法： 的z-index：汽車|號碼|初始|繼承;

初始值：自動

適用於定位的元素

繼承沒有

https://developer.mozilla.org/en/docs/Web/CSS/z-index

#primary_nav_wrap 
 
{ 
 
    background:url("../img/footer_lodyas.png")no-repeat center center fixed; 
 
    display:inline-block; 
 
    width:800px; 
 
} 
 

 
#primary_nav_wrap ul 
 
{ 
 
    list-style:none; 
 
    position:relative; 
 
    margin:0; 
 
    padding:0 
 
} 
 

 
#primary_nav_wrap ul a 
 
{ 
 
    display:block; 
 
    color:black; 
 
    text-decoration:none; 
 
    font-weight:bold; 
 
    font-size:15px; 
 
    line-height:50px; 
 
    padding:0 15px; 
 
    font-family:yekan,montserratAltenates; 
 
} 
 

 
#primary_nav_wrap ul li 
 
{ 
 
    position:relative; 
 
    display:inline-block; 
 
    float:right; 
 
    margin:0; 
 
    padding:0 
 
} 
 

 
#primary_nav_wrap ul li.current-menu-item 
 
{ 
 
    background:#ddd 
 
} 
 

 
#primary_nav_wrap ul li:hover 
 
{ 
 
    background:rgba(255, 153, 0, 0.7); 
 
} 
 

 
#primary_nav_wrap ul ul 
 
{ 
 
    display:none; 
 
    position:absolute; 
 
    top:100%; 
 
    left:0; 
 
    background:#fff; 
 
    padding:0; 
 
     /* Here Put z-index*/ 
 
    z-index:9999; 
 
} 
 

 
#primary_nav_wrap ul ul li 
 
{ 
 
    width:200px 
 
} 
 

 
#primary_nav_wrap ul ul a 
 
{ 
 
    
 
    line-height:120%; 
 
    padding:10px 15px 
 
} 
 

 
#primary_nav_wrap ul ul ul 
 
{ 
 
    top:0; 
 
    left:100% 
 
} 
 

 
#primary_nav_wrap ul li:hover > ul 
 
{ 
 
    display:block 
 
} 
 

 
    .slidshow_container{ 
 
    max-width:800px; 
 
    position:relative; 
 
    margin:0; 
 
    padding:0; 
 
} 
 

 
.mySlides{ 
 
    position:relative; 
 
    margin:0; 
 
    padding:0; 
 
} 
 

 
.numbertext{ 
 
    font-family:yekan,montserratAltenates; 
 
    font-size:15px; 
 
    position:absolute; 
 
    padding:10px; 
 
    color:white; 
 
} 
 

 
.prev,.next{ 
 
    cursor:pointer; 
 
    position:absolute; 
 
    padding:10px; 
 
    color:white; 
 
    margin:auto; 
 
    top:150px; 
 
    font-size:30px; 
 
    border-radius:0px 3px 3px 0px; 
 

 
} 
 

 
.next:hover{ 
 
    background:rgba(40,40,40,0.8); 
 
    border-radius:3px 0px 0px 3px; 
 

 
} 
 

 
.prev:hover{ 
 
    background:rgba(40,40,40,0.8); 
 
} 
 

 
.next{ 
 
    right:0; 
 
} 
 

 
.mySlides .text{ 
 
    font-family:yekan,montserratAltenates; 
 
    font-size:15px; 
 
    position:absolute; 
 
    bottom:0px; 
 
    padding:20px; 
 
    margin-bottom:5px; 
 
    width:800px; 
 
    text-align:center; 
 
    color:white; 
 
    background:rgba(35, 35, 35, 0.60); 
 
    overflow:hidden; 
 
}

<nav id="primary_nav_wrap"> 
 
     <ul> 
 
      <li class="current-menu-item"><a href="#">Home</a></li> 
 
      <li> 
 
       <a href="#">Category</a> 
 
       <ul> 
 
        <li><a href="#">Sub Menu 1</a></li> 
 
        <li><a href="#">Sub Menu 2</a></li> 
 
        <li><a href="#">Sub Menu 3</a></li>      
 
        <li><a href="#">Sub Menu 5</a></li> 
 
       </ul> 
 
      </li> 
 
      <li> 
 
       <a href="#">Contact us</a> 
 

 
      </li> 
 
      <li> 
 
       <a href="#">About us</a>     
 
      </li> 
 
     </ul> 
 
    </nav> 
 
<br style="clear:both;" /> 
 
    <div class="slidshow_container"> 
 
     <div class="mySlides fade"> 
 
      <div class="numbertext">1/4</div> 
 
      <img src="~/Content/img/slideshow/image_1.jpg" style="width:100%;height:400px" /> 
 
      <div class="text">image 1</div> 
 
     </div> 
 

 
     <div class="mySlides fade"> 
 
      <div class="numbertext">2/4</div> 
 
      <img src="~/Content/img/slideshow/image_2.jpg" style="width:100%;height:400px" /> 
 
      <div class="text">image 2</div> 
 
     </div> 
 

 
     <div class="mySlides fade"> 
 
      <div class="numbertext">3/4</div> 
 
      <img src="~/Content/img/slideshow/image_3.jpg" style="width:100%;height:400px" /> 
 
      <div class="text">image 3</div> 
 
     </div> 
 

 
     <div class="mySlides fade"> 
 
      <div class="numbertext">4/ 4</div> 
 
      <img src="~/Content/img/slideshow/image_4.jpg" style="width:100%;height:400px" /> 
 
      <div class="text">image 4</div> 
 
     </div> 
 

 
     <a class="prev" onclick="plusSlides(-1)">&#10094;</a> 
 
     <a class="next" onclick="plusSlides(1)">&#10095;</a> 
 
    </div>