は、ドロップダウンメニュー

私はメニューのような演技のための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>

をしかし、私はカテゴリのメニューの上にマウスを移動すると、ブローリストを取得します下の画像のようなスライドメニューの画像の下に： -

だから、どのように私はこの問題を解決することができますか？

出典

2016-12-11 komeil shahmoradi

「z-index：-1;」を '.slidshow_container'に追加しようとします。CSSルール – Banzay

z-indexは

のz-indexプロパティは、要素のスタック順序を指定し、あなたの問題を解決します。
大きなスタック順序を持つ要素は、常にスタック順序の低い要素の前にあります。
注：位置決め要素（絶対、位置：相対、又は位置：固定位置）に z屈折率ONLY作品。

構文： Zインデックス：オート|数|初期|継承。

初期値：オート

を位置決め要素

継承ない

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>

に適用

出典

2016-12-11 14:31:55

ありがとうございます –

は、ドロップダウンメニュー

答えて

関連する問題