Html 下拉菜单颜色映射不正确_Html_Css

Html 下拉菜单颜色映射不正确

html css

Html 下拉菜单颜色映射不正确,html,css,Html,Css,我已经重新格式化了现成的下拉菜单，并添加了一些线性动画，但我在一些元素的颜色上遇到了问题，如：“Tab4_5”、“Tab3_3”、“Tab1_2”、“Tab1_3” 这是我的HTML文件： <!DOCTYPE html> <html dir="rtl"> <head> <meta name="viewport" content="initial-scale=1.0, user-scalable=no" charset="utf-8

我已经重新格式化了现成的下拉菜单，并添加了一些线性动画，但我在一些元素的颜色上遇到了问题，如：“Tab4_5”、“Tab3_3”、“Tab1_2”、“Tab1_3”

这是我的HTML文件：

<!DOCTYPE html>
<html dir="rtl">
    <head>
        <meta name="viewport" content="initial-scale=1.0, user-scalable=no" charset="utf-8" />
        <link rel="stylesheet" type="text/css" href="style_colors.css">
        <title>My Page Title</title>
    </head>

    <body>
        <ul class="menu" id="nav">

                    <li><a href="contactus.html"><span>Tab1</span></a>
                        <ul class="menu-hover" id="myID">
                            <li><a href="">Tab1_1</a></li>
                            <li><a href="">Tab1_2</a></li>
                            <li><a href="">Tab1_3</a></li>
                        </ul>
                    </li>

                    <li><a href="volunteer.html"><span>Tab2</span></a>
                        <ul class="menu-hover">
                            <li><a href="">Tab2_1</a></li>
                            <li><a href="">Tab2_2</a></li>
                        </ul>
                    </li>

                    <li><a href="candidates.html"><span>Tab3</span></a>
                        <ul class="menu-hover">
                            <li><a href="">Tab3</a></li>
                            <li><a href="">Tab3_1</a></li>
                            <li><a href="">Tab3_2</a></li>
                            <li><a href="">Tab3_3</a></li>
                        </ul>
                    </li>

                    <li><a href=""><span>Tab4</span></a>
                        <ul class="menu-hover">
                            <li><a href="">Tab4_1</a></li>
                            <li><a href="">Tab4_2</a></li>
                            <li><a href="">Tab4_3</a></li>
                            <li><a href="">Tab4_4</a></li>
                            <li><a href="">Tab4_5</a></li>
                        </ul>
                    </li>


                    <li><a href="vision.html"><span>Tab5</span></a>
                        <ul class="menu-hover">
                            <li><a href="">Tab5_1</a></li>
                            <li><a href="">Tab5_2</a></li>
                            <li><a href="">Tab5_3</a></li>
                            <li><a href="">Tab5_4</a></li>
                            <li><a href="">Tab5_5</a></li>
                        </ul>
                    </li>
              </ul>


    </body>
</html>

试试这个：

#nav li:nth-of-type(1) ul li a
{
  border-color: #636393;
}

#nav li:nth-of-type(2) ul li a, #nav li:nth-of-type(2) a {
 border-color: #B5222D;
}
#nav li:nth-of-type(3) ul li a, #nav li:nth-of-type(3) a  {
   border-color: #D4953C;
 }
#nav li:nth-of-type(4) ul li  a, #nav li:nth-of-type(4) a {
   border-color: #609491;
}
#nav li:nth-of-type(5) ul li  a, #nav li:nth-of-type(5) a {
 border-color: #87A248;
 }

#nav li:nth-of-type(1) ul li a:hover {
border-bottom: 35px solid #636393;
height: 9px;
 color: #fff;
 }

 #nav li:nth-of-type(2) ul li a:hover {
  border-bottom: 35px solid #B5222D;
   height: 9px;
  color: #fff;
  }
#nav li:nth-of-type(3) ul li a:hover {
    border-bottom: 35px solid #D4953C;
  height: 9px;
   color: #fff;
  }

#nav li:nth-of-type(4) ul li a:hover {
      border-bottom: 35px solid #609491;
     height: 9px;
     color: #fff;
 }

#nav li:nth-of-type(5) ul li a:hover {
    border-bottom: 35px solid #87A248;
    height: 9px;
     color: #fff;
 }

你能把相关的HTML/CSS发布到问题所在的地方吗？谢谢你的评论。您只需加载html即可轻松解决我的问题。我的想法是我不知道问题到底出在哪里？我只是可以在我刚才提到的标签标题中看到它？我不知道这种颜色是怎么遗传的？对不起，我不能再决定了。你忘了问一个问题

#nav li:nth-of-type(1) ul li a
{
  border-color: #636393;
}

#nav li:nth-of-type(2) ul li a, #nav li:nth-of-type(2) a {
 border-color: #B5222D;
}
#nav li:nth-of-type(3) ul li a, #nav li:nth-of-type(3) a  {
   border-color: #D4953C;
 }
#nav li:nth-of-type(4) ul li  a, #nav li:nth-of-type(4) a {
   border-color: #609491;
}
#nav li:nth-of-type(5) ul li  a, #nav li:nth-of-type(5) a {
 border-color: #87A248;
 }

#nav li:nth-of-type(1) ul li a:hover {
border-bottom: 35px solid #636393;
height: 9px;
 color: #fff;
 }

 #nav li:nth-of-type(2) ul li a:hover {
  border-bottom: 35px solid #B5222D;
   height: 9px;
  color: #fff;
  }
#nav li:nth-of-type(3) ul li a:hover {
    border-bottom: 35px solid #D4953C;
  height: 9px;
   color: #fff;
  }

#nav li:nth-of-type(4) ul li a:hover {
      border-bottom: 35px solid #609491;
     height: 9px;
     color: #fff;
 }

#nav li:nth-of-type(5) ul li a:hover {
    border-bottom: 35px solid #87A248;
    height: 9px;
     color: #fff;
 }