Как оформить элемент в 3-х уровневом меню суперфиш

Question

У меня есть вертикальное меню суперфиш для трехуровневой иерархии.

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

Цвет текста ссылки красный на белом фоне. Когда я наведусь на элемент третьего уровня (зеленый) и меню развернется, я хочу, чтобы активный путь (верхний, средний и нижний выбранные уровни пути) инвертировался в белый текст на красном фоне. Пролистать выбранную ссылку (зеленую) легко с помощью: hover, и каким-то образом фон переворачивается на яблоки и фрукты, но текст остается красным и больше не читается. Как выбрать фрукты и яблоки для управления цветом их текста?

ДОПОЛНИТЕЛЬНАЯ ИНФОРМАЦИЯ: Это дружественная реализация superfish, но я не думаю, что это имеет значение. 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, которые изменяют поля, кроме параметров заполнения и положения для различных условий, но ни один из них не относится к цвету. Насколько я могу судить, меню superfly работает с использованием js для отображения скрытых разделов меню, когда пользователь наводит курсор на элемент. Но я не могу определить, как удается сохранить красный цвет фона фрукта при наведении на яблоко или зеленый, но не могу изменить цвет текста.

Вот фактический html-каскад для отображения меню

<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>

Как видите, определено много классов. И, как я уже сказал, я запутался, почему цвет фона при наведении все еще применяется к родительскому элементу, но цвет текста возвращается к дисплею без наведения. Я просто пытаюсь найти класс, который мог бы выбрать родителя элемента наведения и сохранить текст в состоянии наведения (белый).

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