的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>

一个问题，我认为这是与'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

另外z-index只适用于定位元素，所以我需要添加位置：relative;以.pillowimg1和.pillowheadline，但它是一个标准，所以我不知道你是否应该在你的答案中包括，无论如何谢谢。 –

@BernardCzostek这是我的荣幸。 – zynkn

的CSS列表时，鼠标悬停在

相关推荐