title: Change background color of current child page on side menu
body: <p>Am trying to change the background color of the child in my side menu but i didnt find a way yet to do this. This css i use is inside a module i have in my site and the site its for Dotnetnuke.</p>
  
  <p>Here is the css :</p>
  
  <pre><code>&lt;style&gt;
      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 -&gt; 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 -&gt; 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 -&gt; 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 -&gt; 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 &gt; a
  {
      text-decoration: underline !important;
  }
  
  .menu_sx li ul li a:hover
  {
      background-color: #FEEE9D !important;
  }
  
  &lt;/style&gt;
  </code></pre>
  
  <p>And here are my classes.. 
  ul ID: menusx,
  ul Class: menu_sx,
  li Class: menu,
  Sublevel ul Class: menu_sx_sublevel,
  Active Class: current</p>
  
  <p>I tried adding the background color to .current, i tried creating some new quoted paragraphs{} but still no luck. </p>
  
  <p>Any ideas?</p>
  
  <p><strong>UPDATE:</strong>
  <strong>Here is the html of the side menu</strong></p>
  
  <pre><code>&lt;div&gt;
     &lt;ul id="menusx" class="menu_sx"&gt;
        &lt;li class="menu active_menu_yellow"&gt;
           &lt;a href="http://localhost/dnn7/Automotive-Lubricants/Engine-Oils"&gt;Engine Oils&lt;/a&gt;
           &lt;ul class="menu_sx_sublevel" style="display: block;"&gt;
              &lt;li class=""&gt;&lt;a href="http://localhost/dnn7/Automotive-Lubricants/Engine-Oils/Cars-Vans"&gt;Cars &amp;amp; Vans&lt;/a&gt;&lt;/li&gt;
              &lt;li class=""&gt;&lt;a href="http://localhost/dnn7/Automotive-Lubricants/Engine-Oils/Trucks"&gt;Trucks&lt;/a&gt;&lt;/li&gt;
              &lt;li class="current active_menu_yellow"&gt;&lt;a href="http://localhost/dnn7/Automotive-Lubricants/Engine-Oils/Motorbikes"&gt;Motorbikes&lt;/a&gt;&lt;/li&gt;
              &lt;li class=""&gt;&lt;a href="http://localhost/dnn7/Automotive-Lubricants/Engine-Oils/Marine"&gt;Marine&lt;/a&gt;&lt;/li&gt;
              &lt;li class=""&gt;&lt;a href="http://localhost/dnn7/Automotive-Lubricants/Engine-Oils/Stationary-Engines"&gt;Stationary Engines&lt;/a&gt;&lt;/li&gt;
           &lt;/ul&gt;
        &lt;/li&gt;
        &lt;li class="menu segue"&gt;
           &lt;a href="http://localhost/dnn7/Automotive-Lubricants/Transmission-Oil"&gt;Transmission Oil&lt;/a&gt;
           &lt;ul class="menu_sx_sublevel" style="display: none;"&gt;
              &lt;li class=""&gt;&lt;a href="http://localhost/dnn7/Automotive-Lubricants/Transmission-Oil/Automatic-Transmission"&gt;Automatic Transmission&lt;/a&gt;&lt;/li&gt;
              &lt;li class=""&gt;&lt;a href="http://localhost/dnn7/Automotive-Lubricants/Transmission-Oil/Manual-Transmission"&gt;Manual Transmission&lt;/a&gt;&lt;/li&gt;
           &lt;/ul&gt;
        &lt;/li&gt;
        &lt;li class="menu segue"&gt;
           &lt;a href="http://localhost/dnn7/Automotive-Lubricants/Special-Automotive-Products"&gt;Special Automotive Products&lt;/a&gt;
           &lt;ul class="menu_sx_sublevel" style="display: none;"&gt;
              &lt;li class=""&gt;&lt;a href="http://localhost/dnn7/Automotive-Lubricants/Special-Automotive-Products/Antifreeze"&gt;Antifreeze&lt;/a&gt;&lt;/li&gt;
              &lt;li class=""&gt;&lt;a href="http://localhost/dnn7/Automotive-Lubricants/Special-Automotive-Products/Brake-Fluid"&gt;Brake Fluid&lt;/a&gt;&lt;/li&gt;
           &lt;/ul&gt;
        &lt;/li&gt;
     &lt;/ul&gt;
  &lt;/div&gt;
  </code></pre>