Div擾亂我的CSS菜單

Question

我以爲我在Code Pen中完善了我的CSS導航欄，但是當我在我的實際佈局中實現它時，似乎我佈局中的其他div破壞了下拉菜單（下拉菜單出現，但是當我移動鼠標來選擇一個孩子時，下拉列表消失）。

下面是代碼筆：http://codepen.io/anon/pen/cKJlu

這裏，它是在我的網站實施：http://www.onedirectionconnection.com/tester

而這裏的CSS：

.main-navigation { 
    clear: both; 
    display: block; 
    width: 90%; 
    margin: 0 auto 20px auto; 
} 
.main-navigation ul { 
    list-style: none; 
    margin: 0; 
    padding-left: 0; 
} 
.main-navigation li { 
    float: left; 
    position: relative; 
    margin-right: 15px; 
} 

.main-navigation li:last-of-type{ 
    margin-right:0; 
} 
.main-navigation a { 
    text-align: center; 
    font-size: 14px; 
    text-transform: uppercase; 
    display: block; 
    text-decoration: none; 
    font-weight: bold; 
    border-radius: 3px; 
    background-color: #269BA9; 
    width: 130px; 
    color: #fff; 
} 
.main-navigation ul ul { 
    display: none; 
    float: left; 
    position: absolute; 
     top: 1.5em; 
     left: 0; 
    z-index: 99999; 
} 
.main-navigation ul ul ul { 
    left: 100%; 
    top: 0; 
} 
.main-navigation ul ul a { 
    margin-top: 3px; 
} 
.main-navigation ul ul li { 
} 
.main-navigation li:hover > a { 
    background-color: #DA5969; 
} 
.main-navigation ul ul :hover > a { 
} 
.main-navigation ul ul a:hover { 
} 
.main-navigation ul li:hover > ul { 
    display: block; 
} 
.main-navigation li.current_page_item a, 
.main-navigation li.current-menu-item a { 
} 

/* Small menu */ 
.menu-toggle { 
    display: none; 
    cursor: pointer; 
} 

如果有人可以幫助我弄清楚什麼問題是，它將不勝感激。

Answer 1

子菜單和菜單之間存在空隙。原因是您已給出子菜單a top: 1.5em;。如果它之間有空間，你就不會在它上面徘徊。

.main-navigation ul ul { 
    display: none; 
    float: left; // remove this, float does not work with position: absolute 
    position: absolute; 
     top: 1.5em; // culprit of your problem 
     left: 0; 
    z-index: 99999; 
} 

and give .main-navigation a float: left;來解決餘量問題。