Question

我在导航栏上的子菜单显示正确时遇到问题 - 悬停似乎没有超过正确的链接（＆＃34;媒体＆＃34;）但介于两者之间，并且显示下拉列表在右边而不在＆＃34;媒体＆＃34;链接。

感激地收到任何建议。

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标记内，而不是在其后面。这意味着你需要调整导航ul li：hover＆gt; ul线（你可以放弃＆gt;如果你不需要更多级别）

导航栏子菜单

1 个答案: