Question

我的下拉列表工作正常，但在我将鼠标移到其中的最后一个链接之前关闭它。

CSS

    nav {
    width: 100%;
    display: inline-block;
    margin-bottom: 1%;
    text-align: center;
    background-color: #F0F0F0;
}

nav .links {
    width: 100%;
    line-height: 1.2;
    font-size: 100%;
    text-decoration: underline;
    text-align: center;
}

nav .links a {
    color: #666666;
    text-decoration: none;
    word-spacing: normal;
}

nav .links a:visited {
    color: #666666;
    text-decoration: none;
}

nav .links a:hover { 
    color: #383838;
    text-decoration: none;
}

nav .links a:active {
    color: #666666;
    text-decoration: none;
}

nav ul {
    position:relative;
    list-style:none;
    color: #666666;
    white-space: nowrap;
}

nav li{
    position:relative;
    float: left;
    margin-left: 5%;
}

nav ul li ul { 
    display: none; 
    position: absolute;
    background-color: #F0F0F0;
    border: 2px solid;
    border-radius: 5px;
    padding: 0.5em 1em 0.5em 0.5em;
    line-height: 1.2;
} 

ul li:hover ul {
    display: block; 
}

HTML

<nav>
<div class="links">
    <ul>
        <li><a href="index.php?sivu=etusivu.php">ETUSIVU</a></li>
        <li><a href="index.php?sivu=historia.php">HENKILÖKUVA JA HISTORIA</a></li>
        <li><a href="index.php?sivu=viewAlbum.php&amp;album=1">KORISTEKERAMIIKKA</a></li>
        <li>GALLERIA
            <ul>
                <li><a href="index.php?sivu=viewAlbum.php&album=2">Keramiikkaveistokset</a></li>
                <li><a href="index.php?sivu=viewAlbum.php&album=4">Keramiikka - kuparityöt</a></li>
                <!--Next link is the one where dropdown closes before mouse reaches it-->
                <li><a href="index.php?sivu=viewAlbum.php&album=5">Krisu testi</a></li>
            </ul>
        </li>
    </ul>
</div>

我用Chrome和FF测试过它。 CSS对我来说不是最重要的技能，我认为这应该有效，但显然我错了：）

非常感谢您的帮助，谢谢。

修改我改变了nav ul ul ul ...

    nav ul li ul { 
    z-index: 1;
    display: none; 
    position: absolute;
    background-color: #F0F0F0;
    border: 2px solid;
    border-radius: 5px;
    padding: 0.5em 1em 0.5em 0.5em;

}

现在它工作得很好。所以基本上我只是在那里添加了z-index。

在阴影下面有一个图像，不确定是否有可能混淆这个？ Atleast z-index确实有帮助...

CSS下拉过早关闭

0 个答案: