我正在寻找有关此问题的一些建议。
前一段时间我浏览了一个教程来构建 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 .
将鼠标悬停在带有子菜单的元素上时,颜色
会更改,例如此处的绿色
子菜单显示颜色。
nav ul li:hover ul li a{color:green;}
例如,在悬停子菜单时,颜色从 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;}
希望这对您有所帮助。
关于CSS 下拉 - 子菜单颜色,我们在Stack Overflow上找到一个类似的问题: https://stackoverflow.com/questions/16644210/