Question

我无法弄清楚为什么我的css中的悬停状态不起作用。我已经成功隐藏了子导航，但是无法在翻转时重新出现。我将不胜感激任何帮助。感谢。

这是html：

<nav>
    <ul>
        <li><a href="writings.php">writings</a></li>
            <ul>
                <li><a href="devotionals.php">devotionals</a></li>
                <li><a href="published.php">published</a></li>
                <li><a href="articles.php">articles</a></li>
            </ul>
        <li><a href="fundraising.php">fundraising</a></li>
        <li><a href="about.php#about">about</a></li>
        <li><a href="/contact.php">contact</a></li>
    </ul>
</nav>

和css：

.nav {
position: relative;
margin-left: 200px;
margin-top: -50px;
}


.nav ul {
list-style: none;
margin: 0;
padding: 0;
}

.nav > ul > li {
float: left;
font-size: 30px;
}

.nav ul::after {
content:''; 
display: block;
clear: both;
}

.nav ul li:hover > ul {
display: block;
}

.nav ul ul {
float: left;
display: block;
position: absolute;
top: 90%;
display: none;
line-height: 5px;   
}

nav ul li a {
display: inline-block;
color: rgb(92,178,227);
font-family: 'Josefin Sans', sans-serif;
padding: 10px 20px;
text-decoration: none;
}

Answer 1

您需要列表项内的子导航：

<li><a href="writings.php">writings</a>
        <ul>
            <li><a href="devotionals.php">devotionals</a></li>
            <li><a href="published.php">published</a></li>
            <li><a href="articles.php">articles</a></li>
        </ul>
    </li>

下拉导航中的CSS悬停状态

1 个答案: