html - 当鼠标悬停在其他对象上时，CSS 列表消失

Question

我目前的列表存在问题，当鼠标悬停在其他类似对象上时它会消失(使用开发控制台突出显示边框):http://i.imgur.com/fyBHlen.gif

我可以增加 margin-top 但它看起来不美观。

我的问题是，当鼠标悬停在其他对象上时，如何让它不消失，我实际上是在我的其他网站上完成的，但我检查了代码，我不知道为什么在这个网站上它有效: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>

Answer 1

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

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

我认为是 z-index 的问题