Question

将鼠标悬停时，下拉菜单存在问题。下拉菜单会展开标题，而不是正常打开。代码中的错误在哪里？我是通过示例在w3school（）Code example, by which this code is written上编写此代码的也有几种尝试做相同的事情： first attempt second attempt 在所有这些尝试中，我都执行相同的错误，但是找不到位置究竟。有人可以显示错误在哪里吗？

* {
    margin: 0;
    padding: 0;
    overflow-x: hidden;
}

header, nav {
    background-color: aliceblue;
    color: darkcyan;
    font-family: Arial, Helvetica, sans-serif;
    width: 100%;
    height: auto;
    text-align: center;
    padding: 10px;
}

a {
    text-decoration: none;
    color: darkcyan;
    padding: 10px;
    display: inline-block;
}

.active {
    padding-left: 0;
}

a, .dropdown {
    display: inline-block;
    width: 100px;
    padding: 10px;
}

.dropdown .dropbutton {
    border: none;
    outline: none;
    color: inherit;
    background-color: inherit;
    font-size: inherit;
}

.dropdown-content {
    display: none;
    position: absolute;
    background-color: whitesmoke;
    color: black;
    width: auto;
}

.dropdown-content a {
    float: none;
    padding: 10px;
    display: block;
    text-align: center;
}

.dropdown:hover .dropdown-content {
    display: block;
    position: relative;
    width: auto;
    text-align: center;
}

<!DOCTYPE html>
<html>
<head>
<title>Dropdown Third Version</title>
</head>
<body>

<header>

    <h1>The Homework</h1>

    <nav>

        <a href="" target="" class="active">Home</a>
        <a href="hobbies.html" target="_blank">Hobbies</a>
        <a href="third.html" target="_blank">Third Page</a>

        <div class="dropdown">
            <button class="dropbutton">Dropdown</button>
            <div class="dropdown-content">
                <a href="">One</a>
                <a href="">Two</a>
                <a href="">Three</a>
            </div>
        </div>

    </nav>

</header>
  
</body>
</html>

Answer 1

对CSS中的位置进行简单的更改：

.dropdown:hover .dropdown-content {
    display: block;
    position: absolute;----------------------This One
    width: auto;
    text-align: center;
}

使用此链接可了解：Difference Between relative and absolute

Answer 2

这是因为您在css中给出了position:relative而不是position:absolute来跟随选择器.inline:hover .dropdown

.inline:hover .dropdown {
    display: block;
    position: absolute;
    padding: 10px;
    background-color: white;
    color: dimgray;
}

另一种修改是，对于所有子菜单，您都提到了类dropdown，而不是一个div下具有类dropdown的

<div class="inline">The Page
            <div class="dropdown">
              <div>One</div>
              <div>Two</div>
              <div>Three</div>
            </div>
        </div>

这是工作示例：https://liveweave.com/NpUwOZ

Answer 3

removeAll()

}

只需删除位置线或将位置更改为绝对位置

Answer 4

您忘记了在HTML代码中链接CSS文件。确保先这样做。

否则，它什么也不会做。

HTML + CSS悬停下拉菜单扩展标题

4 个答案: