Cambiar color a un elemento seleccionado de un menu

[kinyiro_360]

esta es mi hoja de estilos

#menu .hide
{
display:none;
}
#menu .show
{
display:list-item;
position:relative;
left:0;
top:0;
}
#menu ul.MenuP
{
margin:0;
padding:0;
list-style:none;
width:287px;
cursor:pointer;
border:1px solid #ccc;
border-radius: 8px 8px 8px 8px;
}
#menu ul li
{
position:relative;
list-style:none;
border-top:1px solid #ccc;
}
#menu ul li ul
{
margin:0;
padding:0;
position:relative;
display:none;
list-style:none;
}
#menu ul li ul li
{
position:relative;
display:list-item;
}
#menu ul li a
{
display:block;
text-decoration:none;
padding:5px;
}

este es el codigo javascript

var idp;
var viewM = null;
function showMenuP(idp)
{
var obj = document.getElementById(idp);
obj.className = (obj == viewM)? 'hide':'show';
if(viewM != null)
{
viewM.className = 'hide';
}
viewM = (obj == viewM) ? null:obj;
}
var id;
var viewSub = null;
function showMenu(id)
{
var obj = document.getElementById(id);
obj.className = (obj == viewSub)? 'hide':'show';
if(viewSub != null)
{
viewSub.className = 'hide';
}
viewSub = (obj == viewSub) ? null:obj;
}
var idd;
var viewSubS = null;
function showSub(idd)
{
var obj = document.getElementById(idd);
obj.className = (obj == viewSubS)? 'hide':'show';
if(viewSubS != null)
{
viewSubS.className = 'hide';
}
viewSubS = (obj == viewSubS) ? null:obj;
}
y el menu esta un poco grande asi q lo resumire

opcion1
opcion1.1
opcion1.2
opcion1.2.1
opcion1.2.1.1
opcion1.2.1.2
opcion1.2.2
opcion1.3
opcion1.3.1
opcion1.4
opcion2
opcion2.1
opcion2.2
opcion2.2.1
opcion3

para llamar a las funciones lo ago asi

onclick="showMenuP('MenuP1');return false;"