按钮旁边的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-content CSS，如下所示：

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

由于您的.dropdown职位为relative，我们可以在其子级上使用position: absolute;来定位他们相对于父级而非整个页面的位置。

left: 100%;将孩子的左边缘与其父母的右边缘对齐，top: 0;将其与顶部齐平对齐。

示例：

＆＃13;

＆＃13;

.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;
}

＆＃13;

<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>

＆＃13;

＆＃13;

＆＃13;

或者您可以在此处查看：https://jsfiddle.net/a0dwpbd9/