3 레벨 수퍼 피쉬 메뉴에서 요소의 스타일을 지정하는 방법

Question

3 레벨 계층 구조에 대해 수퍼 피시 수직 메뉴가 있습니다.

Level-1  Level-2 Level-3  
    Fruit  Apples  Green 

링크 텍스트 색상이 흰색 배경에 빨간색입니다. 세 번째 수준 항목 (녹색)으로 이동하고 메뉴가 펼쳐지면 빨간색 배경의 흰색 텍스트로 바뀌는 활성 경로 (상단, 중앙 및 하단 선택한 경로 수준)를 원합니다. 선택한 링크 (녹색)를 뒤집기는 : 호버 (hover)를 사용하면 쉽고 배경이 사과와 과일로 넘겨 지지만 텍스트는 빨간색으로 표시되어 더 이상 읽을 수 없습니다. 텍스트 색상을 제어하려면 과일 및 사과를 어떻게 선택합니까?

추가 정보 : 이것은 수퍼 피쉬의 드루팔 구현이지만 중요하지 않다고 생각합니다. 는 CSS는

a {color:red; background-color:white;} 

에 의해 정의되고 호버 조건은 여백을 수정 슈퍼 플라이로 주입 다른 클래스와 설정도 있습니다 다음

.sf-menu li:active, /* no effect from this line*/ 
.sf-menu li:hover, 
.sf-menu li:focus,/* no effect from this line*/ 
.sf-menu li.sfHover, 
.sf-menu li:active a, 
.sf-menu a:focus, 
.sf-menu a:hover, 
.sf-menu a:active { 
    background: red; /*Hover background */ 
    color: white; 
} 

에서 해결하지만, 다양한 패딩 및 위치 설정 조건을 나타내지 만 색상을 지정하지는 않습니다. 내가 알 수있는 것처럼 Superfly 메뉴는 js를 사용하여 사용자가 항목 위로 마우스를 가져갈 때 숨겨진 메뉴 섹션을 표시합니다. 하지만 애플이나 그린 위에 마우스를 가져 가면 텍스트 배경색을 변경하지 않고 과일 배경을 빨간색으로 유지하는 방법을 결정할 수 없습니다.

여기 메뉴 디스플레이

<ul id="superfish-3" class="menu sf-menu sf-menu-materials sf-vertical sf-style-MatMenu2 sf-total-items-23 sf-parent-items-22 sf-single-items-1 superfish-processed sf-js-enabled sf-shadow"> 
    <li id="menu-899-3" class="first odd sf-item-1 sf-depth-1 sf-no-children"> 
    <li id="menu-900-3" class="middle even sf-item-2 sf-depth-1 sf-total-children-8 sf-parent-children-0 sf-single-children-8 menuparent"> 
    <a class="sf-depth-1 menuparent sf-with-ul" title="FRUIT" href="/specs/03"> 
     FRUIT 
     <span class="sf-sub-indicator"> »</span> 
    </a> 
     <ul style="display: none; visibility: hidden; float: none; width: 12em;"> 
     <li id="menu-901-3" class="first odd sf-item-1 sf-depth-2 sf-no-children" style="white-space: normal; float: left; width: 100%;"> 
      <a class="sf-depth-2 " title="**APPLE**" href="/specs/031000" style="float: none; width: auto;">APPLE</a> 
     </li> 

볼 수 있듯이, 많은 클래스를 정의하는 실제 HTML 계단식이다. 그리고 내가 말했듯이 왜 마우스 오버 배경색이 여전히 부모에게 적용되는지 혼란 스럽지만 텍스트 색상은 마우스 오버 디스플레이로 돌아갑니다. hover 항목의 부모를 선택하고 텍스트를 호버 조건 (흰색)으로 유지할 수있는 클래스를 찾으려고합니다.

Answer 1

귀하의 사이트로 연결되는 링크가 있습니까? 박스 시도 중 추측으로

:

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


    } 

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

이의 스타일을 분류하는 까다로운 일이 될 수 있지만이를 사용하는 것이 도움이 될 수 있음을 찾을 수 있습니다. 끔찍한 색으로 메뉴를 스타일링하지만 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; 
} 

이 수평 메뉴 내게는 당신이 얻을 방법을 알고하자