수평 2 레벨 수퍼 피쉬 메뉴에서 스타일을 수정하는 방법

Question

두 레벨이있는 ​​수평 수퍼 마리 메뉴가 있습니다.

.sf-menu li:hover > ul, .sf-menu li.sfHover > ul { 
    left: 0; 
    bottom: 0em; 
} 

아무리 바닥 위치를 인상하려고 얼마나 : 나는 첫 번째 수준 링크 위에 마우스를 올려 때 방화 광 스타일이 없다라고하지만, 두 번째 수준 드롭 다운 약 최상위 링크의 하단보다 낮은 2ems 나타납니다 (예 : 하단 : -2.5em) 두 번째 레벨 메뉴가 올라가지 않습니다. 이것은 브라우저 (파이어 폭스)가 격차를 줄 수 있다고 생각하게하지만, 나는 그 증거를 찾을 수 없다.

이 잘못된 위치 지정을 무시하거나 원인을 찾을 수있는 방법은 무엇입니까?

Answer 1

사이트에 링크를 게시 할 수 있습니까?

구체적으로 답변을 ....하지만 추측으로 대상으로 시도하는 까다로운 조금 그것 :

.sf-menu ul a {

이 당신을 도울 수있는 좋은 분명 색깔의 CSS입니다,에 도착 까다로울 수있다 superfish의 CSS와 그립 ...

테마 스킨 :

/*** COLOR SKIN ***/ 

/* main ul element */ 
.sf-menu { 
    border-right: 1px solid FUCHSIA; 
    float:left; 
} 

/* general link styles*/ 
.sf-menu a { 
    display: block; 
    padding:9px 13px; 
    text-decoration:none; 
    border-top: 1px solid; 
    border-left: 1px solid; 
    border-bottom: 1px solid; 
} 

/*** 1st Level ***/ 

/* 1st level links, no hover, no visits */ 
.sf-menu li a { 
    color: yellow; 
    background-color: green; 
    border-color: red; 
} 
/* 1st level links, while hovering over sub menu */ 
.sf-menu li.sfHover a{ 
    color: black; 
    background-color: silver; 
} 

/* 1st level links, hover */ 
.sf-menu li a:hover { 
    color: white; 
    background-color: lime; 
} 

/* 1st level current page */ 
.sf-menu .current_page_item a, 
.sf-menu .current_page_ancestor a, 
.sf-menu .current_page_parent a { 
    border-bottom-color: white; 
    background-color: TEAL; 
} 

/* 1st level down triangles with pure css*/ 
.sf-menu li .sf-sub-indicator { 
    text-indent:-9999px; 
    line-height: 0; 
    border-color:YELLOW transparent transparent; 
    border-style:solid; 
    border-width:4px; /*controls size of triangle */ 
    display:inline-block; 
    margin-left:5px; 
} 

/*** 2nd level ***/ 

/* sub menu */ 
.sf-menu ul { 
    border-right:1px solid; 
    border-bottom:1px solid; 
    border-color: yellow; 
} 
.sf-menu li:hover ul, 
.sf-menu li.sfHover ul { 
    top:32px; /* overriding essential styles- adjust if you have gaps between first level and drop-down sub menu*/ 
} 
.sf-menu ul ul { 
    margin-top:0; /*unlikely to need adjusting */ 
} 

/* 2nd level links, no hover */ 
.sf-menu li li a, .sf-menu li.sfHover li a { 
    color: orange; 
    background-color: blue; 
    border-color: green; 
    border-bottom: 0; 
} 

/* 2nd level links, while hovering over sub menu */ 
.sf-menu li li.sfHover a{ 
    color: black; 
    background-color: silver; 
} 

/* 2nd level links, hover */ 
.sf-menu li li a:hover, .sf-menu li.sfHover li a:hover { 
    color: white; 
    background-color: aqua; 
} 

/* 2nd level current page */ 
.sf-menu li li.current_page_item a, 
.sf-menu li li.current_page_ancestor a, 
.sf-menu li li.current_page_parent a { 
    background-color: TEAL; 
} 

/* 2nd level side triangles with pure CSS */ 
.sf-menu li li .sf-sub-indicator { /*right arrow*/ 
    border-color: transparent transparent transparent WHITE; 
} 

/*** 3rd Level and beyond ***/ 

/* 3rd level links, no hover */ 
.sf-menu li li li a, .sf-menu li.sfHover li li a { 
    color: blue; 
    background-color: red; 
    border-color: blue; 
} 

/* 3rd level links, hover */ 
.sf-menu li li li a:hover, .sf-menu li.sfHover li li a:hover { 
    color: white; 
    background-color: pink; 
} 

/* 2nd level current page */ 
.sf-menu li li li.current_page_item a, 
.sf-menu li li li.current_page_ancestor a, 
.sf-menu li li li.current_page_parent a { 
    background-color: TEAL; 
}