CSS下拉 - 子菜单颜色 [英] CSS Drop Down – Sub Menu Color

问题描述

我正在寻找这个问题的一些建议。

我经历了一个教程，同时回来构建一个CSS下拉菜单，似乎不能更改子菜单的默认颜色 - 它总是匹配a标签的默认红色。

我已经搞砸了一段时间，似乎找到一个解决方案。

这里是html：

 < nav> 
< ul> 
< li>< a class =selectedhref =index.html>首页< / a>< / li> 
< li>< a href =clothing.html>服装< / a>< / li> 
< li>< a href =gear.html> Gear< / a>< / li> 
< li>< a href =brand.html>品牌< / a> 
< ul> 
< li>< a href =＃> XXXXXX< / a>< / li> 
< li>< a href =＃> XXXXXX< / a>< / li> 
< / ul> 
< / li> 
< li>< a href =fighter.html>战斗机< / a> 
< ul> 
< li>< a href =＃> XXXXXX< / a>< / li> 
< li>< a href =＃> XXXXXX< / a>< / li> 
< / ul> 
< / li> 
< li>< a href =account.html>我的帐户< / 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; / *隐藏子菜单* / 
} 
 nav ul li：hover> ul {
 display：block; / *显示悬停时的子菜单* / 
} 
 nav ul {
 float：right; 
 font-size：14px; 
 margin-top：-3px; 
 text-transform：uppercase; 
 list-style：none; 
 position：relative; / * position子菜单根据nav * / 
显示：inline-table; / *缩小子菜单以适合* / 
} 
 nav ul：after {
 content：; 
 clear：both; 
 display：block; / *清除浮动在其他列表项上* / 
} 
 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：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;} 
  

要详细说明，

HTML：

 < nav> 
< ul> 
< li>< a class =selectedhref =index.html>首页< / a>< / li> 
< li>< a href =clothing.html>服装< / a>< / li> 
< li>< a href =gear.html> Gear< / a>< / li> 
< li>< a href =brand.html>品牌< / a> 
< ul> 
< li>< a href =＃> XXXXXX< / a>< / li> 
< li>< a href =＃> XXXXXX< / a>< / li> 
< / ul> 
< / li> 
< li>< a href =fighter.html>战斗机< / a> 
< ul> 
< li>< a href =＃> XXXXXX< / a>< / li> 
< li>< a href =＃> XXXXXX< / a>< / li> 
< / ul> 
< / li> 
< li>< a href =account.html>我的帐户< / 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; / *隐藏子菜单* / 
} 
 nav ul li：hover> ul {
 display：block; / *显示悬停时的子菜单* / 
} 
 nav ul {
 float：right; 
 font-size：14px; 
 margin-top：-3px; 
 text-transform：uppercase; 
 list-style：none; 
 position：relative; / * position子菜单根据nav * / 
显示：inline-table; / *缩小子菜单以适合* / 
} 
 nav ul：after {
 content：; 
 clear：both; 
 display：block; / *清除浮动在其他列表项上* / 
} 
 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：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;} 
  
希望这有助。
 
I'm looking for some advice on this issue.

I went through a tutorial a while back to build a CSS drop down menu and can't seem to change the default color of the sub menus – it always matches the default red color for the a tag.

I've been messing around with this for a while now and can't seem to find a solution. Can someone help me out with this please?

Here is the 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>
And here is the 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;
    }
Thanks for your time.
解决方案
From the above code for changing the color of submenus, you have not targeted the child elements of the main menus. For that you need to target them and add new rules to specifically target that element and change the color. Here is the solution.

On hover of the items with submenus, the color change for instance here green color on display of the submenus.
nav ul li:hover ul li a{color:green;}
On hover of the submenus, change of color from green to yellow for instance.
nav ul li:hover ul li a:hover{color:yellow;}
To elaborate this, 

The 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>
The 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;}
Hope this helps.

                        
这篇关于CSS下拉 - 子菜单颜色的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持IT屋！