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

感谢您的时间。

答

从上述代码改变子菜单的颜色，你没有针对主菜单的子元素。为此，您需要定位它们并添加新的规则来专门定位该元素并更改颜色。这是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;}

希望这有助于。

我希望你满意的解决方案，如果你是，你可以接受无线答案一个绿色的蜱和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

但我喜欢Nathan Lee回答:)其清洁.. – bot

CSS下拉菜单 - 子菜单颜色

相关推荐