为什么我不能将下拉菜单放在按钮下？

Question

我现在很绝望。已尝试 2 天解决此问题，但仍然无济于事。下拉菜单无法正确放置在情境和锻炼按钮下。它显示在导航栏的左侧而不是按钮的底部，这可能是因为我在小提琴的第 19 行 CSS 中使用了左浮动：

.navbar a,.sit,.exercise {
   float:left; 
}

类“导航栏”是整个导航栏

class"dropdown1" 用于以下内容：class"sit" 用于按钮"situation"，class"situ" 用于"sit" 中的下拉菜单

class"dropdown2" 用于以下内容：class"exercise" 用于按钮"exercise"，class"exec" 用于"exercise" 中的下拉菜单

我试图把 position: relative 放在类“坐”和类“锻炼”下。但是，结果是下拉菜单中出现滚动条，您必须向下滚动才能看到整个菜单。位置甚至没有改变！

这是小提琴中的代码 https://jsfiddle.net/zo0raL86/

我希望下拉菜单可以显示在右键下方。真心希望您能帮帮我！非常感谢

Answer 1

您的基本问题是您已将所有浮动设置在您实际想要浮动的元素的子元素上。 例如： 你有

.navbar a,.sit,.exercise {
    float:left;
    width: 32.78%;
}

而浮动：左；并且宽度应该在它们的父元素.i3、.dropdown1和.dropdown2上，就像这样......

.i3,
.dropdown1,
.dropdown2 {
    width: 33.333%;
    float: left;
}

这将解决您的问题的基本问题以及您在小提琴中表达的额外宽度问题。

最好还是将.sit 和.exercise 的宽度设置为100%。

我已经更新了你的小提琴here，这样你就可以在原地看到代码了。

Answer 2

将此添加到您的样式表中：

.navbar > div{
  display: inline-block;
  width: 32.78%;
}

然后在.situ 和.exec 的top-Value 中添加一些像素，然后它将显示在按钮的正下方。

我还更新了你的 html。

<div class="navbar">
   <div class="i3">
     <a href="About.asp">About</a>
   </div>

   <div class="dropdown1">    
    <a href="#">Situation
      <div class="situ">
        <a href="situation1.asp">s1</a>
        <a href="situation2.asp">s2</a>
        <a href="situation3.asp">s3</a>
      </div>       
    </a>
   </div>

   <div class="dropdown2">
    <a href="#">Exercise
      <div class="exec">
        <a href="exercise1.asp">e1</a>
        <a href="exercise2.asp">e2</a>
        <a href="exercise3.asp">e3</a>
      </div>       
    </a>
   </div>     
</div>

从下拉列表中删除 bottom 值并添加

.situ, .exec{
  top: 123px;
}

该值应该是您的margin-top 和height 的总和，以便在导航下平滑地适应。