子菜單對齊

我無法擺脫我的導航欄和我的子菜單下拉菜單之間的差距。您可以查看問題here。子菜單對齊

我的CSS是在這裏：

nav#nav{ 
    float: left; 
    font: 14px/16px 'MuseoSlab500Regular', arial, helvetica, sans-serif; 
    margin-right: auto; 
    z-index: 99999; 
    /*background-image: url(../images/2blkbg.png);*/ 
    /*background-repeat: repeat-x;*/ 
    padding-left: 30px; 
    /*background-position: left bottom;*/ 
    background-color: #000; 
    height: 53px; 
    display: block; 
    position: relative; 
    margin-top: 15px; 
    margin-bottom: 15px; 
    } 
#nav ul{ 
    list-style: none; 
    margin: 0; 
    padding: 0; 
} 
#nav ul li{ 
    float: left; 
    margin-right: 0; 
    margin-bottom: 0; 
    padding-top: 0; 
    padding-right: 49px; 
    padding-bottom: 0; 
    padding-left: 0; 
} 
#nav ul a,#nav li.current-menu-ancestor a{ 
    display: block; 
    height:83px; 
    line-height: 53px; 
    border-top-width: 0px; 
    border-top-style: solid; 
    border-top-color: #fff; 
} 
#nav ul .current_page_item a, #nav ul .current-menu-item a, #nav ul > .current-menu-parent a{ 
    color:#a0ce4e; 
    text-decoration:none; 
    border-color:#a0ce4e; 
} 
#nav ul li{ 
    position: relative; 
} 
#nav ul ul{ 
    display: none; 
    position: absolute; 
    top: 0px; 
    left: 0; 
    width: 170px; 
    background: #edebeb; 
    z-index: 100000; 
    border-top: 3px solid #a0ce4e; 
    z-index: 99999; 
} 
#nav ul li:hover ul{ 
    display: block; 
} 
#nav ul li ul li{ 
    display: block; 
    float: none; 
    margin: 0; 
    padding: 0; 
    background-image: url(../images/blkbg.png); 
    background-repeat: repeat-x; 
} 
#wrapper #nav ul li ul li a{ 
    background: url(../images/subnav_sep.jpg) repeat-x bottom left; 
    border: 0; 
    height: 30px; 
    text-indent: 20px; 
    font: 13px/30px 'PTSansRegular', Arial, Helvetica, sans-serif; 
    color: #333333 !important; 
} 
#wrapper #nav ul li ul li a:hover,#wrapper #nav ul li ul li.current-menu-item a{ 
    background-color:rgba(255,255,255,0.5); 
} 
#nav ul ul ul{ 
    display:none !important; 
} 
#nav ul ul li:hover ul{ 
    display:block !important; 
    top:-3px;left:170px; 
} 
#nav select{ 
    max-width:100%; 
    display:none; 
}

來源

2013-02-02 user2035980

#nav > li > a,#nav li.current-menu-ancestor a { 
    height:83px; 
    line-height:83px; 
} 
#nav ul ul { 
    top:86px; 
}

設置top，這將去除多餘的差距：

#nav ul ul { 
    top:86px; 
}

來源

2013-02-02 21:03:22 GLES

**標記爲正確答案** – GLES

好您發佈的網址，因爲問題不在你包括的CSS。問題是在這個類：

#nav ul ul { 
    top:86px; 
}

這款頂級偏移應設置爲53px，相同的高度，菜單欄（nav#nav）：

#nav ul ul { 
    top:53px; 
}

這個CSS-類實際上是不是在你的CSS樣式表中，但在你的頁面本身。它包含在<head></head>中。

來源

2013-02-02 21:22:54 Jacco

回答

相關問題