如何設計3級超級菜單中的元素

Question

我有一個三級層次結構的超級垂直菜單。

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

鏈接文字顏色在白色背景上是紅色的。當我將鼠標懸停到第三級項目（綠色）並且菜單展開時，我希望活動路徑（頂部，中部和底部所選路徑級別）反轉爲紅色背景上的白色文本。翻轉選定的鏈接（綠色）很容易使用：懸停，不知何故背景翻轉蘋果和水果，但文字保持紅色，不再可讀。如何選擇水果和蘋果來控制他們的文字顏色？

其他信息： 這是superfish的drupal實現，但我認爲不重要。 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; 
} 

尋址也有通過超級蒼蠅修飾邊距注入其他類和設置，但由於各種填充和位置設置條件，但沒有處理顏色。盡我所知，飛蠅菜單使用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級聯。就像我說的，我很困惑爲什麼懸停的背景顏色仍然適用於父級，但是文本顏色會回到非懸停顯示。我只是想找到一個可以選擇懸停項目父項的類，並將文本保持懸停狀態（白色）。

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