这里有两个菜单。我的问题是无法更改垂直菜单的文本颜色。我用‘颜色：红色！"important"，但它不起作用。我想我应该改变".dropbtn，li a"，但我不知道如何改变它。(我想定义两种不同的颜色(并且它是完整的代码：http://jsfiddle.net/cudn8es7/63/
* {
padding: 0;
margin: 0;
direction: rtl;
font-family: "tahoma";
}
html, body {
height: 100%;
}
u1{
list-style: none;
}
.firstmenu {
list-style-type: none;
margin: 0;
padding: 0;
overflow: hidden;
background-color: rgba(20,30,250,0.5);
font-family: "B Nazanin";
direction: rtl;
font-size: 20px;
}
.firstmenu a:hover {
background-color: aqua;
transition: all 0.5s;
}
.firstmenu li {
float: right;
}
.dropbtn ,li a {
display: inline-block;
color: white;
text-align: center;
padding: 14px 16px;
text-decoration: none;
direction: rtl;
transition: all 1s;
}
li.dropdown {
display: inline-block;
}
.dropdown-content {
display: none;
position: absolute;
background-color: #f9f9f9;
min-width: 160px;
box-shadow: 0px 8px 16px 0px rgba(0,0,0,0.2);
z-index: 1;
}
.dropdown-content a {
color: black;
padding: 12px 16px;
text-decoration: none;
display: block;
text-align: right;
transition: all 0.5s;
}
.dropdown-content a:hover {
color: white;
background-color: black;
transition: all 0.5s;
}
.dropdown:hover .dropdown-content {
display: block;
}
.menu {
width: 12%;
float: right;
direction: rtl;
text-align: center;
font-family: "B Nazanin";
margin-top: 30px;
color: red;
}
.list-item{
box-shadow:-5px 4px 3px 1px gray ;
background-color: deepskyblue;
font-size: 20px;
color: red !important;
padding: 10px;
border-radius: 10px 0px 0px 10px;
margin-bottom: 10px;
transition: transform 1s;
}
.menu li:hover{
transform: scalex(1.4);
transition: all 0.5s;
background-color: blue;
color: pink !important;
}
a:active{
color:yellow;
}
#banner{
width: 100%;
height: auto;
position: fixed;
top: 0;
z-index: -1 ;
}<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>دومین صفحه وب من</title>
</head>
<body>
<ul class="firstmenu">
<li class="dropdown">
<a href="#" class="dropbtn">menu</a>
<div class="dropdown-content">
<a href="#">home</a>
<a href="#exprience">exprience</a>
<a href="#education">education</a>
<a href="#cv">CV</a>
<a href="#contact">contact</a>
</div>
</li>
<li><a href="#exprience1">exprience</a></li>
<li><a href="#education1">education</a></li>
<li><a href="#CV1">CV</a></li>
<li><a href="#contact1">contact</a></li>
</ul>
<img src="https://splashingpaint.files.wordpress.com/2018/03/corella-remnants.jpg" id="banner">
<div id="wrapper">
<div class="menu">
<ul>
<li class="list-item">
<a href="#exprience">exprience</a>
</li>
<li class="list-item">
<a href="#education">education</a>
</li>
<li class="list-item">
<a href="#cv">CV</a>
</li>
<li class="list-item">
<a href="#contact">contact</a>
</li>
</ul>
</div>
</body>
</html>尝试添加此类
#wrapper > div > ul > li > a {
color:red;
}
尝试使用此选项，无需在.menu li:hover中添加!important
.menu li:hover a{
color: pink;
}
在此处更新jsfiddle
.menu ul li a{
color:red!important;
}
这是解决方案，但我建议您不要使用!important，因为它不被认为是良好的编程实践，并尝试使用基于类的部分，它将帮助您渴望您的网页
您只需编写用于设置垂直菜单锚标记样式的css即可。没有必要！在这里使用它很重要。
.menu li a {color: red;}