下拉菜單不會被推下

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