仅使用CSS和HTML的下拉菜单的位置

是否可以将下拉菜单放置在特定按钮下，而不是默认情况下仅使用css的第一个按钮

例如，如何在“第四”按钮下而不是在“第一”按钮下（在“信息”按钮下而不是“旅馆”按钮下）下拉？我知道人们在创建下拉列表时通常使用

和

元素，但我感兴趣的是，在使用

元素时是否可以选择位置

.dropbtn{
背景色：#000000；
颜色：白色；
填充：8px；
字体大小：9px；
宽度：80px；
右边距：5px；
字体系列：“Istok Web”，无衬线；
边界：无；
光标：指针；
}
.下拉列表{
位置：相对位置；
显示：内联块；
浮动：左；
最高：6.7%；
左边距：5px；
}
.下拉内容{
显示：无；
位置：绝对位置；
背景色：#95e5c4；
字体系列：“Istok Web”，无衬线；
文本对齐：居中！重要；
字体大小：9px；
宽度：80px；
盒影：0px 6px 12px 0px rgba（0,0,0,0.2）；
z指数：；
}
.下拉内容a{
颜色：黑色；
填充：8px 12px；
文字装饰：无；
显示：块；
}
.下拉内容a:悬停{背景色：#e6}
.下拉：悬停.下拉内容{
显示：块；
}

旅社
预订
画廊
信息
找到我们

您可以像这样使用引导程序的导航栏：

<nav class="navbar navbar-inverse">
  <div class="container-fluid">
    <div class="navbar-header">
      <a class="navbar-brand" href="#">WebSiteName</a>
    </div>
    <ul class="nav navbar-nav">
      <li class="active"><a href="#">Home</a></li>
      <li class="dropdown"><a class="dropdown-toggle" data-toggle="dropdown" href="#">Page 1 <span class="caret"></span></a>
        <ul class="dropdown-menu">
          <li><a href="#">Page 1-1</a></li>
          <li><a href="#">Page 1-2</a></li>
          <li><a href="#">Page 1-3</a></li>
        </ul>
      </li>
      <li><a href="#">Page 2</a></li>
      <li><a href="#">Page 3</a></li>
    </ul>
  </div>
</nav>

<div class="container">
  <h3>Navbar With Dropdown</h3>
  <p>This example adds a dropdown menu for the "Page 1" button in the navigation bar.</p>
</div>

带下拉菜单的导航栏
本例为导航栏中的“第1页”按钮添加了一个下拉菜单

---

全屏查看：

在

下拉列表内容

类中添加

左边距

可能是一个不错的选择，但可能不是最好的选择。很明显，你必须计算出适合你实际情况的保证金值。在您提供的示例中，设置 左边距

到
267px
看起来不错，我想

编辑：

正如OP所说的，屏幕分辨率可能是一个问题，这里是纯css解决方案，不需要使用任何额外的
边距


.dropbtn{
背景色：#000000；
颜色：白色；
填充：8px；
字体大小：9px；
宽度：80px；
右边距：5px；
字体系列：“Istok Web”，无衬线；
边界：无；
光标：指针；
}
.下拉列表{
显示：内联块；
浮动：左；
最高：6.7%；
左边距：5px；
}
.下拉内容{
显示：无；
背景色：#95e5c4；
字体系列：“Istok Web”，无衬线；
文本对齐：居中！重要；
字体大小：9px；
宽度：80px；
盒影：0px 6px 12px 0px rgba（0,0,0,0.2）；
}
.下拉式内容父项{
显示：内联块；
位置：相对位置；
}
.下拉内容a{
颜色：黑色；
填充：8px 12px；
文字装饰：无；
显示：块；
}
.下拉列表内容a：悬停{
背景色：#e6
}
.下拉：悬停.下拉内容{
显示：块；
位置：绝对位置；
}

旅社
预订
画廊
信息
找到我们
这也是我的想法。。。但不确定在屏幕分辨率方面是否明智？@nemo_87嗯，如果我之前的回答是这样的话，屏幕分辨率可能是个问题。看看编辑过的代码。希望这就是你想要的。：）