下拉菜单HTML+；CSS

尝试创建下拉列表。我不确定这是否是最好的方法，但这是我的看法

HTML

我不明白为什么当你把鼠标悬停在第一个菜单上时，“About”会掉下来。我该如何解决这个问题

显示：无也是隐藏内容的最佳方式吗？可见性：0和不透明度：0如何

---

感谢

将

位置：相对

添加到

.main

和

位置：绝对

添加到

.sub

您必须在.sub类中添加位置：绝对

.sub {
  border: 1px solid black;
  list-style: none;
  width: 50px;
  display: none;
  position: absolute;
}

---

只需将position:absolute添加到.sub，如下所示：

.sub {
  border: 1px solid black;
  list-style: none;
  width: 50px;
  display: none;
  position: absolute;
}

---

您应该将绝对位置添加到子类和相对于主类的位置

`.sub {
  border: 1px solid black;
  list-style: none;
  width: 50px;
  display: none;
  position: absolute;
  }

.main {
  display: inline-block;
  width: 100px;
  border: 1px solid black;
  position: relative;
}`

---

容器的相对位置将此问题与其他答案区分开来。谢谢大家的输入

.sub {
  border: 1px solid black;
  list-style: none;
  width: 50px;
  display: none;
  position: absolute;
}

`.sub {
  border: 1px solid black;
  list-style: none;
  width: 50px;
  display: none;
  position: absolute;
  }

.main {
  display: inline-block;
  width: 100px;
  border: 1px solid black;
  position: relative;
}`