子菜单对齐答案

【问题标题】：Alignment of submenu子菜单对齐
【发布时间】：2013-02-02 20:54:15
【问题描述】：

我无法消除我的导航栏和我的子菜单下拉菜单之间的差距。您可以查看问题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;
}

【问题讨论】：

标签： css drop-down-menu navigation

【解决方案1】：

#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;
}

【讨论】：

【解决方案2】：

很好，您发布了网址，因为问题不在您包含的 css 中。问题出在这个类中：

#nav ul ul {
  top:86px;
}

此顶部偏移应设置为 53px，与您的菜单栏高度相同 (nav#nav)：

#nav ul ul {
  top:53px;
}

这个css-class实际上不是在你的css-stylesheet中，而是在你的页面本身中。它包含在<head></head> 中。

【讨论】：