如何推內容塊下降2像素

我有一個<ul>塊與<li>列表，形成子菜單。當您將鼠標懸停在主菜單欄（下面的頁面鏈接）上時，綠色邊框頂部條的高度爲2個像素，我無法弄清楚如何將其向下移動，以將藍色條正好覆蓋在頁面主體部分的頂部。如何推內容塊下降2像素

反正建議是極大的讚賞。謝謝。

謹慎附加註釋： 我已經嘗試了許多樣式向下推動塊2個像素，但我已盡力，最終破壞的子菜單懸停導航，這導致在子菜單中消失的流的那些懸停。

添加clearfix給你主菜單的div #menu-main-menu:after { content: ''; clear: both; display: table; }
按下菜單項，從頂部2px的： #menu-main-menu > .menu-item { margin-top: 2px;}
圍棋喝啤酒

2015-06-17 13:07:51

哈哈...我認爲「去喝啤酒」先來:) –

優秀@波格丹庫斯坦 - 這個解決了它。非常感謝您的幫助。 –

如果我正確理解您的問題，那麼您正在討論將子菜單向下移動2px。如果是這樣，然後嘗試下面的CSS代碼

CSS

.nav-menu { 
    float:left; 
    height:60px; 
}

2015-06-17 12:49:13

謝謝@NileshMahajan - 你理解正確。 –

但是，您需要在底部添加更多填充，因爲您的子菜單比父項低。 Su Hovering無法正常工作:) –

我曾在@NileshMahajan嘗試過這種風格，並且它將塊推下2個像素，問題在於，一旦您將鼠標懸停在子菜單上，它們就會消失（至少它們在Chrome中執行）。 –

nav#site-navigation ul.sub-menu { 
    margin-top: 2px; 
    border-top: 10px solid #a4c74c; 
    z-index: 1; 
}

2015-06-17 12:50:15

你的答案達到了2像素的推動，但打破了懸停導航@AakashAggarwal –

它如何打破導航？你可以說得更詳細點嗎？ –

試試看...將鼠標懸停在子菜單上看效果 –

第一次和最後下拉有

nav#site-navigation ul.sub-menu{z-index: 1;}

和中間的一個：

ul#menu-main-menu li.menu-item-has-children.pulldown-button ul.sub-menu{z-index:3;}

那就是爲什麼你的菜單「消失」。

2015-06-17 13:12:57 KevinB

回答