下拉菜单不会被推下

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