Question

这里有两个菜单。我的问题是我不能更改垂直菜单的文本颜色。我在列表项类中使用了'color：red！important'但它没有用。我认为我应该更改'.dropbtn，li a'但我不知道如何更改它。（我想定义2不同的颜色）它是完整的代码： 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>

Answer 1

尝试使用此方法，无需在!important中添加.menu li:hover

.menu li:hover a{
  color: pink;
}

更新jsfiddle here

Answer 2

尝试添加此类

#wrapper > div > ul > li > a {
  color:red;
}

Answer 3

  .menu ul li a{
  color:red!important;
}

这是解决方案，但是不建议您不要使用!important，因为它不被视为良好的编程习惯，请尝试使用基于类的部分，它将帮助您实现自己的网站页面

Answer 4

您只需编写用于设置垂直菜单锚标签样式的css。不需要！important在这里使用它。

.menu li a {color: red;}

为什么！important在我的代码中的CSS中不起作用

4 个答案: