Question

我创建了一个导航栏，当您将鼠标悬停在“社交”链接上时，会出现一个下拉菜单。它确实出现了，但它在条形图上创建了更多的填充，并且内容不像正常的下拉菜单那样被按下。这是jsfiddle。谢谢任何回复的人。 jsfiddle

 body {
  padding: 0;
  margin: 0;
  overflow-y: scroll;
  font-family: Arial;
  font-size: 18px;
}

#nav {
  background-color:#222;
}
#nav_wrapper {
  width: 960px;
  margin: 0 auto;
  text-align: left;
}
#nav ul {
  list-style-type: none;
  padding: 0;
  margin: 0;
  position: relative;
}
#nav ul li{
  display:inline-block;
}
#nav ul li:hover {
  background-color: #333;
}
#nav ul li a,visited{
  color: #ccc;
  display:block;
  padding: 15px;
  text-decoration: none;
}
#nav ul li a:hover {
  color:#ccc;
  text-decoration:none;
}
#nav ul li:hover ul {
  display:block;
}
#nav ul ul{
  display:none;
  poisition:absolute;
  background-color: #333;
  border: 5px solid #222;
  border-top: 0;
  margin-left: -5px;
  min-width: 200px;
}
#nav ul ul li{
    display:block;
}
# nav ul ul li a,visited{
  color: #ccc;
}
#nav ul ul li a:hover{
  color:#099;
}

Answer 1

这将解决它：

#nav ul ul{
  display:none;
  position:absolute;
  background-color: #333;
  border: 5px solid #222;
  border-top: 0;
  margin-left: -5px;
  min-width: 200px;
}

问题position拼写错误。

Answer 2

而不是：

position:absolute;

你写了

poisition:absolute;

https://codepen.io/Karadjordje/pen/oYarzW

下拉菜单不会被推下

2 个答案: