html - Change background color of current child page on side menu -

html - Change background color of current child page on side menu -

am trying alter background color of kid in side menu didnt find way yet this. css utilize within module have in site , site dotnetnuke.

here 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 { 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 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 { 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 { 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 { 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 > { text-decoration: underline !important; } .menu_sx li ul li a:hover { background-color: #feee9d !important; } </style>

and here classes.. ul id: menusx, ul class: menu_sx, li class: menu, sublevel ul class: menu_sx_sublevel, active class: current

i tried adding background color .current, tried creating new quoted paragraphs{} still no luck.

any ideas?

update: here html of side menu

<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>

i managed prepare this. here code ive added:

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

html css dotnetnuke