导航栏子菜单

Question

我在让导航栏上的子菜单正确显示时遇到问题 - 悬停似乎没有在正确的 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;
}

Answer 1

将整个子列表 ul 包含在 A 标记内，而不是在它之后。这意味着您还需要调整 nav ul li:hover > ul 行（如果不需要更多级别，可以删除 >）

导航栏子菜单

Nav bar sub menu

nav

drop-down-menu