html - 为什么我不能在按钮下放置下拉菜单？

Question

我现在很绝望。已经尝试了 2 天来解决这个问题，但仍然无济于事。下拉菜单无法正确放置的情况和练习按钮。它显示在导航栏的左侧而不是按钮的底部，这可能是因为我在 fiddle 的第 19 行 CSS 中使用了 float left:

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

类“navbar”用于整个导航栏

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

类“dropdown2”用于以下内容:类“exercise”用于按钮“练习”，类“exec”用于“练习”中的下拉菜单

我试过将 position: relative 放在 class"sit"和 class"exercise"下。但是，结果是下拉菜单中出现滚动条，您必须向下滚动它才能看到整个菜单。位置甚至没有改变!

这是fiddle中的代码 https://jsfiddle.net/zo0raL86/

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

Answer 1

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

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

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

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

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

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

我已经更新了你的 fiddle here所以你可以在原地看到代码。