superfish菜單造型問題

Question

我試圖在我的WordPress主題中設計我的超級菜單。我試圖消除懸停時下拉之間的差距。

正如您從圖片中看到的那樣存在一個小小的差距。

我試圖編輯下面的代碼，我相信這個代碼適用於有問題的部分。但是，如果使用負餘量，則會使選項重疊，如圖所示。

進出口目前編輯工作下面的代碼： - 然而

.sf-menu li li { 
background:  #193030; 
} 

放置邊距：-10px;這產生： -

您的幫助和建議表示讚賞。

感謝

編輯

請參閱快魚:)

/*** ESSENTIAL STYLES ***/ 
.sf-menu, .sf-menu * { 
margin:   0; 
padding:  0; 
list-style:  none; 
} 
.sf-menu { 
line-height: 1.0; 
} 
.sf-menu ul { 
position:  absolute; 
top:   -999em; 
width:   10em; /* left offset of submenus need to match (see below)  */ 
} 
.sf-menu ul li { 
width:   100%; 
} 
.sf-menu li:hover { 
visibility:  inherit; /* fixes IE7 'sticky bug' */ 
} 
.sf-menu li { 
float:   left; 
position:  relative; 
} 
.sf-menu a { 
    display:  block; 
position:  relative; 
} 
.sf-menu li:hover ul, 
.sf-menu li.sfHover ul { 
left:   0; 
top:   2.5em; /* match top ul list item height */ 
z-index:  99; 
} 
ul.sf-menu li:hover li ul, 
ul.sf-menu li.sfHover li ul { 
top:   -999em; 
} 
ul.sf-menu li li:hover ul, 
ul.sf-menu li li.sfHover ul { 
left:   10em; /* match ul width */ 
top:   -10; 
} 
ul.sf-menu li li:hover li ul, 
ul.sf-menu li li.sfHover li ul { 
top:   -999em; 
} 
ul.sf-menu li li li:hover ul, 
ul.sf-menu li li li.sfHover ul { 
left:   10em; /* match ul width */ 
top:   0; 
} 

/*** DEMO SKIN ***/ 
.sf-menu { 
float:   left; 
margin-bottom: 1em; 
} 
.sf-menu a { 
border-right: 1px solid #193030; 
padding:  .75em 1em; 
text-decoration:none; 
font: 11.5px Open Sans; 
text-transform: uppercase; 
color: #fff; 
} 
.sf-menu a, .sf-menu a:visited { /* visited pseudo selector so IE6 applies text colour*/ 
color:   #fff; 
} 
.sf-menu li { 
background:  transparent; 
} 
.sf-menu li a {color: #fff;} 

.sf-menu li li { 
background:  #193030; 
margin-top: -0px; 
} 
.sf-menu li li a:hover {background-color: #0a1c1c;} 
.sf-menu li li li { 
background:  #9AAEDB; 
} 
.sf-menu li:hover, .sf-menu li.sfHover, 
.sf-menu a:focus, .sf-menu a:hover, .sf-menu a:active { 
background:  #193030; 
outline:  0; 
} 

/*** arrows **/ 
.sf-menu a.sf-with-ul { 
padding-right: 2.25em; 
min-width:  1px; /* trigger IE7 hasLayout so spans position accurately  */ 
} 
.sf-sub-indicator { 
position:  absolute; 
display:  block; 
right:   .75em; 
top:   1.5em; /* IE6 only */ 
width:   10px; 
height:   10px; 
text-indent: -999em; 
overflow:  hidden; 
background:  url('images/arrows-ffffff.png') no-repeat -10px -100px; /* 8-bit indexed alpha png. IE6 gets solid image only */ 
} 
a > .sf-sub-indicator { /* give all except IE6 the correct values */ 
top:   1.0em; 
background-position: 0 -100px; /* use translucent arrow for modern browsers*/ 
} 
/* apply hovers to modern browsers */ 
a:focus > .sf-sub-indicator, 
a:hover > .sf-sub-indicator, 
a:active > .sf-sub-indicator, 
li:hover > a > .sf-sub-indicator, 
li.sfHover > a > .sf-sub-indicator { 
background-position: -10px -100px; /* arrow hovers for modern browsers*/ 
} 

/* point right for anchors in subs */ 
.sf-menu ul .sf-sub-indicator { background-position: -10px 0; } 
.sf-menu ul a > .sf-sub-indicator { background-position: 0 0; } 
/* apply hovers to modern browsers */ 
.sf-menu ul a:focus > .sf-sub-indicator, 
.sf-menu ul a:hover > .sf-sub-indicator, 
.sf-menu ul a:active > .sf-sub-indicator, 
.sf-menu ul li:hover > a > .sf-sub-indicator, 
.sf-menu ul li.sfHover > a > .sf-sub-indicator { 
background-position: -10px 0; /* arrow hovers for modern browsers*/ 
} 

/*** shadows for all but IE6 ***/ 
.sf-shadow ul { 
background: url('../images/shadow.png') no-repeat bottom right; 
padding: 0 8px 9px 0; 
-moz-border-radius-bottomleft: 17px; 
-moz-border-radius-topright: 17px; 
-webkit-border-top-right-radius: 17px; 
-webkit-border-bottom-left-radius: 17px; 
} 
.sf-shadow ul.sf-shadow-off { 
background: transparent; 
} 

Answer 1

這已得到修復感謝lovely Florian..

完全CSS我需要修訂

.sf-menu li.sfHover ul { 
    left:   0; 
    top:   2.1em; /* match top ul list item height */ 
    z-index:  99; 
} 

這表明UL距離頂端有多遠。

我希望這個知識也能幫助別人。