CSS下拉菜單 - 子菜單顏色

我經歷了一段教程，回過頭來構建CSS下拉菜單，似乎無法更改子菜單的默認顏色 - 它總是與a標籤的默認紅色匹配。

我一直在這裏亂搞了一段時間，似乎無法找到解決方案。有人可以幫我解決這個問題嗎？

下面是HTML：

<nav> 
     <ul> 
     <li><a class="selected" href="index.html">Home</a></li> 
     <li><a href="clothing.html">Clothing</a></li> 
     <li><a href="gear.html">Gear</a></li> 
     <li><a href="brand.html">Brand</a> 
      <ul> 
       <li><a href="#">XXXXXX</a></li> 
       <li><a href="#">XXXXXX</a></li> 
      </ul> 
     </li> 
     <li><a href="fighter.html">Fighters</a> 
      <ul> 
       <li><a href="#">XXXXXX</a></li> 
       <li><a href="#">XXXXXX</a></li> 
      </ul> 
     </li> 
     <li><a href="account.html">My Account</a></li> 
     </ul> 
    </nav>

這裏是CSS：

nav { 
     position:relative; 
     float:right; 
     font-size:14px; 
     margin-top:35px; 
     font-weight:bold; 
     padding-right:178px; 
     z-index:4; 
    } 
    nav ul ul { 
     display:none; /* hide sub menus */ 
    } 
    nav ul li:hover > ul { 
     display:block; /* show sub menus on hover */ 
    } 
    nav ul { 
     float:right; 
     font-size:14px; 
     margin-top:-3px; 
     text-transform:uppercase; 
     list-style:none; 
     position:relative; /* position sub menu according to nav */ 
     display:inline-table; /* condense with of sub menu to fit */ 
    } 
    nav ul:after { 
     content:""; 
     clear:both; 
     display:block; /* clear floats on other list items */ 
    } 
    nav ul li { 
     float:left; 
    } 
    nav ul li:hover a { 
     color:#ee1f3b; 
     text-decoration:none; 
     -webkit-transition-property:color; 
     -webkit-transition-duration:0.2s, 0.2s; 
     -webkit-transition-timing-function:linear, ease-in; 
     -moz-transition-property:color; 
     -moz-transition-duration:0.2s, 0.2s; 
     -moz-transition-timing-function:linear, ease-in; 
    } 
    nav ul li a { 
     padding:4px 11px; 
     text-decoration:none; 
     color:#000000; 
     display:block; 
     text-decoration:none; 
    } 
    nav ul ul { 
     background:#cacaca; 
     position:absolute; 
     top:25px; /* sub position */ 
    } 
    nav ul ul li { 
     float:none; 
     border-bottom:1px solid rgba(0, 0, 0, 0.2); 
     position:relative; 
    } 
    nav ul ul li:last-child { 
     border-bottom:1px solid rgba(0, 0, 0, 0.2); 
    } 
    .selected { 
     color:#ee1f3b; 
    } 
    nav ul ul li a:hover { 
     color:#000000; 
    }

感謝您的時間。

來源

2013-05-20 Barry

從上述代碼改變子菜單的顏色，你沒有針對主菜單的子元素。爲此，您需要定位它們並添加新的規則來專門定位該元素並更改顏色。這是solution。

將子菜單懸停在項目上時，color會在此處更改子菜單的顯示顏色。

nav ul li:hover ul li a{color:green;}

在子菜單懸停，顏色的變化從到yellow例如。

nav ul li:hover ul li a:hover{color:yellow;}

爲了詳細說明這一點，

的HTML：

<nav> 
    <ul> 
     <li><a class="selected" href="index.html">Home</a></li> 
     <li><a href="clothing.html">Clothing</a></li> 
     <li><a href="gear.html">Gear</a></li> 
     <li><a href="brand.html">Brand</a> 
      <ul> 
       <li><a href="#">XXXXXX</a></li> 
       <li><a href="#">XXXXXX</a></li> 
      </ul> 
     </li> 
     <li><a href="fighter.html">Fighters</a> 
      <ul> 
       <li><a href="#">XXXXXX</a></li> 
       <li><a href="#">XXXXXX</a></li> 
      </ul> 
     </li> 
     <li><a href="account.html">My Account</a></li> 
    </ul> 
</nav>

的CSS：

nav { 
    position:relative; 
    float:right; 
    font-size:14px; 
    margin-top:35px; 
    font-weight:bold; 
    padding-right:178px; 
    z-index:4; 
} 
nav ul ul { 
    display:none; /* hide sub menus */ 
} 
nav ul li:hover > ul { 
    display:block; /* show sub menus on hover */ 
} 
nav ul { 
    float:right; 
    font-size:14px; 
    margin-top:-3px; 
    text-transform:uppercase; 
    list-style:none; 
    position:relative; /* position sub menu according to nav */ 
    display:inline-table; /* condense with of sub menu to fit */ 
} 
nav ul:after { 
    content:""; 
    clear:both; 
    display:block; /* clear floats on other list items */ 
} 
nav ul li { 
    float:left; 
} 
nav ul li:hover a { 
    color:#ee1f3b; 
    text-decoration:none; 
    -webkit-transition-property:color; 
    -webkit-transition-duration:0.2s, 0.2s; 
    -webkit-transition-timing-function:linear, ease-in; 
    -moz-transition-property:color; 
    -moz-transition-duration:0.2s, 0.2s; 
    -moz-transition-timing-function:linear, ease-in; 
} 
nav ul li a { 
    padding:4px 11px; 
    text-decoration:none; 
    color:#000000; 
    display:block; 
    text-decoration:none; 
} 
nav ul ul { 
    background:#cacaca; 
    position:absolute; 
    top:25px; /* sub position */ 
} 
nav ul ul li { 
    float:none; 
    border-bottom:1px solid rgba(0, 0, 0, 0.2); 
    position:relative; 
} 
nav ul ul li:last-child { 
    border-bottom:1px solid rgba(0, 0, 0, 0.2); 
} 
.selected { 
    color:#ee1f3b; 
} 
nav ul ul li a:hover { 
    color:#000000; 
} 

nav ul li:hover ul li a{color:green;} 
nav ul li:hover ul li a:hover{color:yellow;}

希望這有助於。

來源

2013-05-20 07:08:16 Nitesh

我希望你滿意的解決方案，如果你是，你可以接受無線答案一個綠色的蜱和upvote相同。謝謝。 - @Barry McMillan – Nitesh

太棒了 - 非常感謝！ – Barry

另一種方法是給UL一個ID在子菜單中像這樣

<li><a href="brand.html">Brand</a> 
    <ul id="submenu"> 
    <li><a href="#">AAAAAA</a></li> 
    <li><a href="#">BBBBBB</a></li> 
    </ul> 
</li>

CSS

#submenu li a 
{ 
    color:green;  
}

查看完整的jsfiddle here

來源

2013-05-20 07:23:24 bot

但我喜歡Nathan Lee回答:)其清潔.. – bot

CSS下拉菜單 - 子菜單顏色

回答

相關問題