导航栏子菜单
Nav bar sub menu
我在让导航栏上的子菜单正确显示时遇到问题 - 悬停似乎没有在正确的 link("media")上方,而是在两者之间,以及下拉菜单显示在右侧而不是 "media" link 下方。
非常感谢收到任何建议。
HTML:
<nav>
<ul>
<li><a href="index.php" title="home">Home</a></li>
<li><a href="about.php" title="Find out more">About</a></li>
<li><a href="testimonials.php" title="What my students say">Testimonials</a></li>
<li><a>Media</a>
<ul>
<li><a href="photos.php">Photos</a></li>
<li><a href="videos.php">Videos</a></li>
</ul>
</li>
<li><a href="contact.php" title="Get in contact">More Info</a></li>
</ul>
</nav>
css 这里:
nav ul {
background-color: black;
text-align: center;
}
nav ul li {
display: inline-block;
padding: 10px;
}
nav ul li a {
color: white;
text-decoration: none;
}
nav ul ul {
display: none;
}
nav ul li:hover > ul {
display: block;
position: absolute;
}
nav ul ul li {
display: block;
}
将整个子列表 ul 包含在 A 标记内,而不是在它之后。这意味着您还需要调整 nav ul li:hover > ul 行(如果不需要更多级别,可以删除 >)