样式化多级下拉菜单

Question

我正在制作一个带有多级下拉菜单的导航栏，当我将文本悬停在我的导航栏中时，我的样式没有问题，但似乎我无法为下拉菜单的内部设置样式。我尝试自己设计样式，但无济于事。我对此真的很陌生，所以有人可以启发我吗？我只是想知道该怎么做。提前致谢。 oi62.tinypic.com/2ugdog9.jpg 我想这样做，同时将其文本颜色更改为白色或任何其他颜色。 `

    <nav class="navbar navbar-default navbar-static-top">
      <div class="container">
        <div class="navbar-header">
          <button type="button" class="navbar-toggle collapsed" data-toggle="collapse" data-target="#navbar" aria-expanded="false" aria-controls="navbar">
            <span class="sr-only">Toggle navigation</span>
            <span class="icon-bar"></span>
            <span class="icon-bar"></span>
            <span class="icon-bar"></span>
          </button>
          <a class="navbar-brand" href="#">...</a>
        </div>
        <div id="navbar" class="navbar-collapse collapse">
          <ul class="nav navbar-nav">


         <li class="dropdown">
              <a href="#" class="dropdown-toggle" data-toggle="dropdown" role="button" aria-expanded="false">Testing<span class="caret"></span></a>
              <ul class="dropdown-menu multi-level" role="menu" aria-labelledby="dropdownMenu">


         <li><a class ="menu-title" href="#">Menu</a></li>


          <li class="dropdown-submenu">
            <a class="text" tabindex="-1" href="#">1st level</a>
            <ul class="dropdown-menu">
              <li><a tabindex="-1" href="#">2nd level</a></li>
               <li><a tabindex="-1" href="#">2nd level</a></li>
            </ul>
           </li>        

</li>

    </ul>

        </div>
      </div>
    </nav>

  </div>
</div>

`

.dropdown-menu{
background-color: #ff9999;

}
.menu-title{
background-color: #ff7f7f;
}
.dropdown{
background-color:#ff4c4c;
}

.ul .navbar .navbar-nav{
background-color:#000;
}

.dropdown-submenu  {
background-color: #fff;
position: relative;

}

.dropdown-submenu>.dropdown-menu {
top: 0;
left: 100%;
margin-top: -6px;
margin-left: -1px;
-webkit-border-radius: 0 6px 6px 6px;
-moz-border-radius: 0 6px 6px;
border-radius: 0 6px 6px 6px;
}

.dropdown-submenu:hover>.dropdown-menu {
display: block;
background-color: ;

}

.dropdown-submenu>a:after {
display: block;
content: " ";
float: right;
width: 0;
height: 0;
border-color: transparent;
border-style: solid;
border-width: 5px 0 5px 5px;
border-left-color: #ccc;
margin-top: 5px;
margin-right: -10px;

}

.dropdown-submenu:hover>a:after {
border-left-color: #fff;

}

.dropdown-submenu.pull-left {
float: none;
}

.dropdown-submenu.pull-left>.dropdown-menu {
left: -100%;
margin-left: 10px;
-webkit-border-radius: 6px 0 6px 6px;
-moz-border-radius: 6px 0 6px 6px;
border-radius: 6px 0 6px 6px;

}


.navbar-nav .open .dropdown-submenu{
background-color: #ff7f7f;
color:#ffffff;
}



.navbar-default{
margin-top: 20px;
background-color: #CC0000;
border-color: #FFFFFF;
margin-bottom: 0px;

}

.navbar-default .navbar-brand {
color: #FFFFFF;

}

.navbar-default .navbar-brand:hover,
.navbar-default .navbar-brand:focus {
color: #FFFFFF;
background-color: transparent;
}

.navbar-default .navbar-nav > li > a {
color: #FFFFFF;
}

.navbar-default .navbar-nav > .active > a,
.navbar-default .navbar-nav > .active > a:hover,
.navbar-default .navbar-nav > .active > a:focus {
color: #FFFFFF;
background-color: #A80000;
}

.navbar-default .navbar-nav > li > a:hover,
.navbar-default .navbar-nav > li > a:focus {
color: #FFFFFF;
background-color: #A80000;
}

.navbar-default .navbar-nav > .open > a,
.navbar-default .navbar-nav > .open > a:hover,
.navbar-default .navbar-nav > .open > a:focus {
background-color: #A80000;
color: #FFFFFF;

}

`

Answer 1

根据您的实际需要，以下应该可以工作：

li.dropdown a{color:rgb(154,154,154);} (style all a's within class of dropdown)
ul.dropdown-menu li a{color:rgb(154,154,154);} (style all a's within li.class of dropdown-menu )