在侧边菜单上更改当前子页面的背景颜色

Question

我正在尝试在我的侧边菜单中更改孩子的背景颜色，但我还没有找到方法来做到这一点。我使用的这个 css 在我的站点中的一个模块内，该站点用于 Dotnetnuke。

这是css：

<style>
    menu{
    padding-left:24px;
}

ul.menu_sx {
    width: 172px;
    padding: 0;
    margin: 0;
    list-style: none;
    font-size: 12px;
    color: #333;
    font-family: Lucida Grande; 
}

ul.menu_sx li {    
    padding: 0;
    margin: 0;
    background: transparent;
    border-bottom: 1px solid #d8d8d8;
    list-style: none;
}

ul.menu_sx li a {    
    padding: 8px 24px 8px 8px;
    margin: 0;
    display: block;
    text-decoration: none;
    text-transform: none;
    text-align: left;
    color: #333;
}

ul.menu_sx a:hover {
    text-decoration: none;
    background-color: #FEEE9D;
    color: #996600;
}

ul.menu_sx li a span {
    position: relative;
    left: 0;
}

/* MENU SECONDO LIVELLO -> voce con submenu associato */
ul.menu_sx ul{
    #margin-top:-19px;
    padding: 0px;
}

ul.menu_sx li.segue a,
ul.menu_sx li.segue_2 a {
    background-image: url(/dnn7/Portals/0/menu/BlackArrowRight.gif);
    background-repeat: no-repeat;
    background-position: 1px -1px;
}

/* elementi annidati secondo livello */
.menu_sx_sublevel li a
{
    background-image: none;
}

ul.menu_sx li.segue a:hover,
ul.menu_sx li.segue_2 a:hover {
    background-image: url(/dnn7/Portals/0/menu/BrownArrowRight.gif);
}

/* MENU SECONDO LIVELLO -> menu attivo */
ul.menu_sx li.active,
ul.menu_sx li.active_menu_yellow,
ul.menu_sx li.active_menu_2_yellow{

}

ul.menu_sx li.active a,
ul.menu_sx li.active_menu_yellow a,
ul.menu_sx li.active_menu_2_yellow a{
    padding-top: 9px;
    background: url("/dnn7/Portals/0/menu/BrownArrowDown.gif") 1px -1px #feee9d no-repeat;
    color: #996600;
    background-color: #fee35b;
}

/* MENU SECONDO LIVELLO -> menu aperto */
ul.menu_sx li.active_menu a,
ul.menu_sx li.active_menu_2 a{
    background: url(/dnn7/Portals/0/menu/BlackArrowDown.gif) no-repeat 155px 12px;
    font-weight: bold;
}

ul.menu_sx li.active_menu a:hover,
ul.menu_sx li.active_menu_2 a:hover,
ul.menu_sx li.active_menu_yellow a:hover,
ul.menu_sx li.active_menu_2_yellow a:hover {
    background: url("/dnn7/Portals/0/menu/BrownArrowDown.gif") 1px -1px #feee9d no-repeat;
    color: #996600;
    background-color: #fee35b;
}

/* MENU SECONDO LIVELLO -> submenu 2 livello*/
ul.menu_sx li ul li {
    border-bottom: none;
}

ul.menu_sx li ul li a {
    color: #996600;
    background: none !important;
    background-color: #ffffff !important;
    padding-left: 5px;
}

ul.menu_sx li ul li.segue a,
ul.menu_sx li ul li.segue_2 a{
    background-image: url("/dnn7/Portals/0/menu/BrownArrowRight.gif");
    background-position: 1px -1px;
}

ul.menu_sx li ul li.active_menu a,
ul.menu_sx li ul li.active_menu_2 a,
ul.menu_sx li ul li.active_menu_yellow a,
ul.menu_sx li ul li.active_menu_2_yellow a{
    background: url("/dnn7/Portals/0/menu/BrownArrowDown.gif") 1px -1px #FFF9D9 no-repeat;
}

ul.menu_sx li ul li.active_menu a:hover,
ul.menu_sx li ul li.active_menu_2 a:hover,
ul.menu_sx li ul li.active_menu_yellow a:hover,
ul.menu_sx li ul li.active_menu_2_yellow a:hover{
    background-position: 1px -1px;
}

/*fix luca 14/08/2014*/
ul.menu_sx li.active {
    background-color: #fee35b !important;
    color: #996600;
    font-weight: bold;
    /*padding: 9px 24px 8px 8px;*/
}

ul.menu_sx li ul li.active {
    /*padding-left:16px;*/
}

ul.menu_sx li ul li ul li.active {
    padding-left:24px;
}

.current > a
{
    text-decoration: underline !important;
}

.menu_sx li ul li a:hover
{
    background-color: #FEEE9D !important;
}

</style>

这是我的课程.. ul ID：菜单x， ul 类：menu_sx， li 类：菜单， 子级 ul 类：menu_sx_sublevel， 活动类：当前

我尝试将背景颜色添加到 .current，我尝试创建一些新的引用段落{}，但仍然没有运气。

有什么想法吗？

更新： 这是侧边菜单的html

<div>
   <ul id="menusx" class="menu_sx">
      <li class="menu active_menu_yellow">
         <a href="http://localhost/dnn7/Automotive-Lubricants/Engine-Oils">Engine Oils</a>
         <ul class="menu_sx_sublevel" style="display: block;">
            <li class=""><a href="http://localhost/dnn7/Automotive-Lubricants/Engine-Oils/Cars-Vans">Cars &amp; Vans</a></li>
            <li class=""><a href="http://localhost/dnn7/Automotive-Lubricants/Engine-Oils/Trucks">Trucks</a></li>
            <li class="current active_menu_yellow"><a href="http://localhost/dnn7/Automotive-Lubricants/Engine-Oils/Motorbikes">Motorbikes</a></li>
            <li class=""><a href="http://localhost/dnn7/Automotive-Lubricants/Engine-Oils/Marine">Marine</a></li>
            <li class=""><a href="http://localhost/dnn7/Automotive-Lubricants/Engine-Oils/Stationary-Engines">Stationary Engines</a></li>
         </ul>
      </li>
      <li class="menu segue">
         <a href="http://localhost/dnn7/Automotive-Lubricants/Transmission-Oil">Transmission Oil</a>
         <ul class="menu_sx_sublevel" style="display: none;">
            <li class=""><a href="http://localhost/dnn7/Automotive-Lubricants/Transmission-Oil/Automatic-Transmission">Automatic Transmission</a></li>
            <li class=""><a href="http://localhost/dnn7/Automotive-Lubricants/Transmission-Oil/Manual-Transmission">Manual Transmission</a></li>
         </ul>
      </li>
      <li class="menu segue">
         <a href="http://localhost/dnn7/Automotive-Lubricants/Special-Automotive-Products">Special Automotive Products</a>
         <ul class="menu_sx_sublevel" style="display: none;">
            <li class=""><a href="http://localhost/dnn7/Automotive-Lubricants/Special-Automotive-Products/Antifreeze">Antifreeze</a></li>
            <li class=""><a href="http://localhost/dnn7/Automotive-Lubricants/Special-Automotive-Products/Brake-Fluid">Brake Fluid</a></li>
         </ul>
      </li>
   </ul>
</div>

Answer 1

我设法解决了这个问题。这是我添加的代码：

ul.menu_sx li ul li.current.active_menu_yellow a{
    background-color: #FEEE9D !important;
}