0

ナビゲーション バーとサブメニュー ドロップダウン メニューの間のギャップを取り除くことができません。問題はこちらでご覧いただけます。

私の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;
}
4

2 に答える 2

0 
#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-02T21:03:22.247 に答える
0

含めたcssに問題はないので、URLを投稿してよかったです。問題はこのクラスにあります：

#nav ul ul {
  top:86px;
}

このトップ オフセットは、メニュー バーと同じ高さの53pxnav#navに設定する必要があります ( )。

#nav ul ul {
  top:53px;
}

この css-class は、実際にはcss-stylesheet ではなく、ページ自体にあります。に含まれてい<head></head>ます。

于 2013-02-02T21:22:54.730 に答える