Question

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

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

“ navbar”类适用于整个导航栏

class“ dropdown1”用于以下各项：class“ sit”用于按钮“ situation”，class“ situ”用于“ sit”的下拉菜单

class“ dropdown2”用于以下类：class“ exercise”用于按钮“ exercise”，class“ exec”用于“ exercise”中的下拉菜单

我试图摆出位置：“ sit”类和“ exercise”类下的相对对象。但是，结果是滚动条显示在下拉菜单中，您必须向下滚动才能看到整个菜单。职位甚至都没有改变！

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

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

Answer 1

将此添加到样式表：

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

然后将一些像素添加到top和.situ的{{1}}值中，然后将其显示在按钮的正下方。

我还更新了您的html。

.exec

从下拉菜单中删除<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的总和，以使其在导航中平稳显示。

Answer 2

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

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

而float：left;并且宽度应像这样在其父元素.i3，.dropdown1和.dropdown2上...

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

这将解决您的问题的基本知识以及您在小提琴中表达的其他宽度问题。

更好地将.sit和.exercise的宽度设置为100％。

我已经更新了您的提琴here，以便您可以就地查看代码。

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

2 个答案: