下拉菜單顯示菜單和子菜單之間的差距？

我自定義wordpress二十十一主題。這裏是link供參考。在這裏你可以看到當你懸停在菜單上時，它會顯示下拉菜單。但是您可以看到父菜單（公司）和子菜單之間存在差距。那麼如何清除？任何幫助和建議都將非常可觀。下拉菜單顯示菜單和子菜單之間的差距？

來源

2012-11-30 NewUser

這是因爲您的下拉列表中的邊距爲4px。

您需要更改margin: 4px;,#access a {，該值設置標籤周圍的邊距，包括其下方的標籤。將其更改爲margin: 4px 4px 0 4px;這使邊際上各方不同的是底部

更新演示here

來源

2012-11-30 13:21:52 Andy

感謝您的答案。這只是直線。 – NewUser

是所需結果的擴展盒子陰影部分？如果仔細觀察下拉框的陰影，會看到導航的灰色背景。這是我在答案中刪除頂部填充的原因之一。 –

-1

只需更改以下CSS聲明：

#access ul ul { 
    -moz-box-shadow: 0 2px 3px rgba(0,0,0,0.2); 
    -webkit-box-shadow: 0 3px 3px rgba(0,0,0,0.2); 
    box-shadow: 0 3px 3px rgba(0,0,0,0.2); 
    display: none; 
    float: left; 
    margin: 0; 
    position: absolute; 
    top: 33px; 
    left: 4px; 
    width: 193px; 
    z-index: 99999; 
    padding: 14px 0 5px 0; 
    -webkit-border-radius: 0 0 2px 2px; 
    -moz-border-radius: 0 0 2px 2px; 
    border-radius: 0 0 2px 2px; 
}

要：

#access ul ul { 
    -moz-box-shadow: 0 2px 3px rgba(0,0,0,0.2); 
    -webkit-box-shadow: 0 3px 3px rgba(0,0,0,0.2); 
    box-shadow: 0 3px 3px rgba(0,0,0,0.2); 
    display: none; 
    float: left; 
    margin: 0; 
    position: absolute; 
    top: 41px; 
    left: 4px; 
    width: 193px; 
    z-index: 99999; 
    padding: 0 0 5px 0; 
    -webkit-border-radius: 0 0 2px 2px; 
    -moz-border-radius: 0 0 2px 2px; 
    border-radius: 0 0 2px 2px; 
    background-color: #FFF; 
}

注意在padding和top性質的變化和添加background-color。

來源

2012-11-30 13:20:48

更改一些CSS：

#access li:hover > a, 
#access a:focus { 
    background: #FFF; /* Show a solid color for older browsers */ 
    color: #373737; 
    -webkit-border-radius: 5px 5px 0 0; 
    -moz-border-radius: 5px 5px 0 0; 
    border-radius: 5px 5px 0 0; 
    margin-bottom: -4px; 
    padding-bottom: 9px; 
}

的邊距已被添加。

其他答案更改原始佈局。

更新：添加了填充底部。它是9px，因爲我們上去4，我們需要下降8加1填充#access a

來源

2012-11-30 13:24:22

這會導致鼠標懸停時導航欄更改大小，並在鼠標懸停在不同的子菜單上時會導致大量錯誤的大小調整 – Andy

下拉菜單顯示菜單和子菜單之間的差距？

回答

相關問題