按钮旁边的 HTML/CSS 下拉菜单

Question

所以我有一个带有下拉菜单的垂直导航栏，但每次我做下拉菜单时，它都会从它开始的地方直接下降。我希望下拉菜单出现在栏的右侧。在代码片段中，您将看到我现在使用的代码（来自 w3schools）。

我还包含了一张图片以更好地展示我的意思。

.dropbtn {
    background-color: #4CAF50;
    color: white;
    padding: 16px;
    font-size: 16px;
    border: none;
    cursor: pointer;
}

.dropdown {
    position: relative;
    display: inline-block;
}

.dropdown-content {
    display: none;
    position: absolute;
    background-color: #f9f9f9;
    min-width: 160px;
    box-shadow: 0px 8px 16px 0px rgba(0,0,0,0.2);
}

.dropdown-content a {
    color: black;
    padding: 12px 16px;
    text-decoration: none;
    display: block;
}

.dropdown-content a:hover {background-color: #f1f1f1}

.dropdown:hover .dropdown-content {
    display: block;
}

.dropdown:hover .dropbtn {
    background-color: #3e8e41;
}

<h2>Dropdown Menu</h2>
<p>Move the mouse over the button to open the dropdown menu.</p>

<div class="dropdown">
  <button class="dropbtn">Dropdown</button>
  <div class="dropdown-content">
    <a href="#">Link 1</a>
    <a href="#">Link 2</a>
    <a href="#">Link 3</a>
  </div>
</div>

Answer 1

您可以将position: absolute;一些简单的定位规则应用到您的.dropdown-contentCSS 中，如下所示：

.dropdown:hover .dropdown-content {
    display: block;
    position: absolute;
    left: 100%;
    top: 0;
}

因为您的.dropdown位置是relative，所以我们可以position: absolute;在其子页面上使用相对于其父页面而不是整个页面来定位它们。

left: 100%; 将子级的左边缘与其父级的右边缘top: 0;对齐，并沿顶部对齐。

例子：

.dropdown:hover .dropdown-content {
    display: block;
    position: absolute;
    left: 100%;
    top: 0;
}

.dropbtn {
    background-color: #4CAF50;
    color: white;
    padding: 16px;
    font-size: 16px;
    border: none;
    cursor: pointer;
}

.dropdown {
    position: relative;
    display: inline-block;
}

.dropdown-content {
    display: none;
    position: absolute;
    background-color: #f9f9f9;
    min-width: 160px;
    box-shadow: 0px 8px 16px 0px rgba(0,0,0,0.2);
}

.dropdown-content a {
    color: black;
    padding: 12px 16px;
    text-decoration: none;
    display: block;
}

.dropdown-content a:hover {background-color: #f1f1f1}

.dropdown:hover .dropdown-content {
    display: block;
    position: absolute;
    left: 100%;
    top: 0;
}

.dropdown:hover .dropbtn {
    background-color: #3e8e41;
}

或者你可以在这里查看：https : //jsfiddle.net/a0dwpbd9/