的CSS列表時，鼠標懸停在

我目前停留在我的名單問題的其他對象消失，當鼠標懸停在這樣的其他對象（使用開發者控制檯突出邊框）消失：http://i.imgur.com/fyBHlen.gif 的CSS列表時，鼠標懸停在

我可以只增加利潤率，但看起來並不美觀。

我的問題是，如何讓它不會消失，當鼠標懸停在其他對象上時，我在其他網站上實際完成了它，但我檢查了代碼，並且我不知道爲什麼這個工具可以工作：http://i.imgur.com/t9shiO6.gif這是導航CSS代碼：

.nav 
{ 
width: 100%; 
padding: 10px 0; 
background-color: #ffffff; 
text-align: center; 
white-space: nowrap; 
} 
ol 
{ 
padding: 0; 
margin: 0; 
list-style-type: none; 
font-size: 18px; 
height: 35px; 
line-height: 200%; 
display: inline-block; 
} 
ol a 
{ 
text-decoration: none; 
color:#50394c; 
display: block; 
} 
ol >li 
{ 
float: left; 
padding-left:45px; 
padding-right:45px; 
opacity: 0.8; 
} 
ol >li:hover 
{ 
opacity: 1; 
} 
ol >li >ul 
{ 
display: none; 
list-style-type: none; 
background-color:#ffffff; 
} 
ol >li:hover >ul 
{ 
display:block; 
padding-left:0px; 
padding-top:14px; 

} 
ol > li > ul > li 
{ 
border-top: 1px dashed #b97070; 
text-align:center; 
opacity: 0.8; 
} 
ol > li > ul > li:hover 
{ 
opacity: 1; 
}

這裏是標題和IMG的CSS代碼：

.pillowheadline 
{ 
width:700px; 
display: inline-block; 
position: relative; 
bottom: 40px; 
} 
.pillowimg1 
{ 
width:500px; 
height:300px; 
display: inline-block; 
margin-top:120px; 
}

HTML：

<header> 

     <h1 class="logo">PRZYKŁADOWY TEKST</h1> 

     <nav id="topnav"> 

      <div class="nav"> 
       <ol> 
        <li><a href="#">Front page</a></li> 
        <li><a href="#">Recommended Products</a> 
         <ul> 
          <li><a href="#">Pillows</a></li> 
          <li><a  href="#">Honey</a></li>     
          <li><a href="#">przykład3</a></li>     
         </ul> 
        </li> 
        <li><a href="#">Natural Products</a> 
         <ul> 
          <li><a href="#">Cereals</a></li> 
          <li><a href="#">Wicker</a></li>     
          <li><a href="#">Fruits</a></li>     
          <li><a href="#">Dairy</a></li>     
          <li><a href="#">Herbs</a></li>     
         </ul> 
        <li><a href="#">Contact</a></li> 
       </ol> 
      </div> 
     </nav> 

    </header>

來源

2017-08-26 Bernard Czostek

一個問題，我認爲這是與'Z-index'問題。 – zynkn

請爲此提供codepen或jsfiddle –

@amitwadhwani不，我們不希望當我們的Stackoverflow擁有自己的Stack代碼片段工具 – LGSon

.pillowimg1{ 
    z-index: -1; 
} 
.pillowheadline{ 
    z-index: 1; 
} 

ol > li > ul > li{ 
    z-index: 1; 
}

我認爲這是z-index

來源

2017-08-26 14:39:23 zynkn

另外z-index只適用於定位元素，所以我需要添加位置：relative;以.pillowimg1和.pillowheadline，但它是一個標準，所以我不知道你是否應該在你的答案中包括，無論如何謝謝。 –

@BernardCzostek這是我的榮幸。 – zynkn

的CSS列表時，鼠標懸停在

回答

相關問題