#cssonclickswitch {
position:relative;
width: 150px;
margin:20px auto 100px;
}
#cssonclickswitch li {
width:50px;
}
#cssonclickswitch a {
display: block;
width:50px;
color: #000;
text-decoration:none;
text-align:center;
}
#cssonclickswitch a img {
border:0;
}
#cssonclickswitch a:hover,
#cssonclickswitch a:focus:hover {
color: #cff; 
background:black;
}
#cssonclickswitch a:active,
#cssonclickswitch a:focus {
color:#fff;
background-color:red;
}
#cssonclickswitch a span {display: none;}
#cssonclickswitch a:active span,
#cssonclickswitch a:focus span {
display: block;
position: absolute; 
top: 0; 
left: 170px; 
width: 50px;
color:red;
background:#fff;
}


.navigation {       
margin: 0;       
padding: 0;       
list-style: none;       
background: #000;       
color: #fff;       
width: 200px;       
font: 1.2em "Trebuchet MS", sans-serif;       
}    

.navigation a, .navigation span 
{       
display: block;       
padding: 4px 10px;       
color: #fff;       
text-decoration: none;       
background: #000 url(menu-item.png) left bottom no-repeat;       
}    

.navigation .toggleSubMenu a, .navigation .toggleSubMenu span 
{       
background-image: url(menu-item-deroule.png);       
}    

.navigation .open a, .navigation .open span 
{       
background-image: url(menu-item-enroule.png);       
}    

.navigation a:hover, .navigation a:focus, .navigation a:active 
{       
text-decoration: underline;       
}    

.navigation .subMenu 
{       
font-size: .8em;       
background: #ccc url(subMenu.png) 0 0 repeat-x;       
font-size: .9em;       
margin: 0;       
padding: 0;       
border-bottom: 1px solid #666;       
}    

.navigation ul.subMenu a 
{       
background: none;       
padding: 3px 20px;       
}