CSS菜單高亮大小不匹配

Question

在我的主要水平導航中，我有一個名爲＃main-nav的容器，以及其中的錨標籤形式的按鈕。錨標記大小與＃main-nav容器不匹配，我找不到原因。哦，還有，下拉式菜單在菜單底線上的位置應該高於幾個像素，我不確定這是否與此相關。

我目前有突出顯示的顏色和下拉菜單欄相同，以掩飾問題，但這不是最佳。 （A代碼檢查清楚地表明瞭問題）

我的網站是http://www.darkmatter-designs.com/

任何幫助將不勝感激，我已經江郎才盡。

Answer 1

使用max-width和margin 0 auto居中的UL在導航

#main-nav ul { 
/* display: inline-block; */ 
    position: relative; 
    max-width: 960px; 
    margin: 0 auto; 
} 

CSS定心：

如果你只是想錨是 「中心」 ：

#main-nav ul { 
    position: relative; 
    /* display: inline-block; */ 
    max-width: 960px; 
    margin: 0 auto; 
    text-align: center; 
} 

#main-nav ul li { 
    /* float: left; */ 
    display: inline-block; 
} 

要定勢，你可以添加填充頂到#main-nav ul ul

#main-nav ul ul { 
    background: #1E344A; 
    position: absolute; 
    top: 100%; 
    z-index: 1; 
    padding-top: 3px;/*was added*/ 
} 

而且由於使用的是絕對位置ul ul確保您添加position:relative到這樣的父元素的下拉列表：

#main-nav ul li { 
    float: left; 
    position: relative;/*was added*/ 
}