Question

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

我可以增加保证金 - 但它会看起来不美观。

我的问题是，当鼠标悬停在其他物体上时，我怎么能让它不消失，我实际上已经在我的其他网站上完成了它，但是我检查了代码，我不知道为什么它会起作用：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

的问题

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

1 个答案: