錯誤位置的css下拉菜單

Question

我有一個純css下拉菜單的定位問題。你可以找到網站在： link to website

當你懸停的「教程」（即時消息沒有真正做什麼，但它是爲了學習）和「博客」，你看到下拉菜單的位置不直接在選項卡下面，它被移到右邊。

如何將下拉菜單放在選項卡下？我在這裏先向您的幫助表示感謝。

Answer 1

嘗試編輯文件 「的main.css」，改變這種：

ul#nav li ul{ 
position:absolute; 
display:none; 
} 

對於這一點：

ul#nav li ul{ 
position:absolute; 
display:none; 
padding:0; 
margin:0; 
} 

我認爲這將解決你的位置問題。

Answer 2

您需要重置元素上的margin的padding的瀏覽器默認值。

，你可以在你的CSS的頂部做的最小值爲：

html,body,ul,li,p { margin:0;padding:0 }

查找http://cssreset.com了更多的選擇。

Answer 3

發生這種情況的原因是您的瀏覽器會自動將自定義CSS添加到某些元素，如本例中的「ul」標籤。 我使用的是Chrome瀏覽器，我看到了所有子列表的這種樣式：-webkit-padding-start：40px; 所以只需添加這個CSS：

ul#nav li ul{ 
padding-left:0; 
}