我无法弄清楚为什么我的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;
}
答案 0 :(得分:2)
您需要列表项内的子导航:
<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>