Problema con un css

[Marco_1]

Salve a tutti. Ho un problema con un css legato ad un menu. Vorrei che si aprisse dipo albero e ogni elemento attivo fosse in bold.
Il css qui sotto funziona bene. Pero' in bold rimane solo l'elemento esterno. Quando l'albero ha due figli, non riesco a mettere l'elemento attivo in bold mentre tutto il resto si. COme nell'ultima riga, riesco a farlo lampeggiare, a mettere una sottolieatura etc...ma non in bold. Qualche idea ?

Grazie



div#menusx
{
position:absolute;
left:0px;
text-align:left;
width:180px;
background-color:#DDEEF9;
}

ul.menu {
        list-style: none;
        margin: 0;
        padding: 0;
}

ul.menu li {
        display: block;
        background: none;
        margin: 0;
  padding: 2px;
        line-height: 18px;
}

ul.menu li a {
        outline: none;
        padding: 2px;
        margin: 0;
        text-decoration: none;
        color: Black;
}

ul.menu li a:hover,
ul.menu li a:active,
ul.menu li a:focus {
        text-decoration: underline;
}

ul.menu li.active  {
        font-weight: bold;
        color: Black;
}

ul.menu li ul {
   width:100%;
   position:relative;
left:-50px;
   list-style: none;
        margin-bottom: 15px;
        padding-right: 0;
        font-size: smaller;
        text-decoration: none;
}

ul.menu li li {
        font-weight: bold;
 padding-left: 16px !important;
}

ul.menu li li a {
       
        padding-left: 16px !important;
        font-weight: normal !important;
     
}

ul.menu li li a:hover,
ul.menu li li a:active,
ul.menu li li a:focus {
        text-decoration: none;
}

ul.menu li li.active  {
background-color: #fff;
         
text-decoration: underline;
        color: red;