Menu vertical con flecha

[hueros]

Hola a tod@s:

Llevo días atascado con este menu. La idea es crear un menu vertical sencillo (ul - li), con el texto negro dentro de una caja con fondo blanco. Hasta aquí sencillo.

Mi intención es lograr que al pasar el ratón por encima (:hover) la caja cuadrada de fondo blanco, se transforme y pase a tener el fondo color oro y una "flecha" hacia la izda.

El remate ya es que al pinchar en el enlace, mantenga esta forma para diferenciar el enlace activo de los no-activos.

Hasta el momento, no se si he llegado a medio camino . Este es el codigo:

Código CSS:

#menuVertical ul{
                display: block;
                margin-left: auto;
                margin-right: auto;
 
            }
 
            #menuVertical ul a{
                /*Quitar subrayado*/
                text-decoration: none;
                background-position: center;
                padding-right: 22px;
                padding-left: 22px;
                display: block;
                line-height: 25px;
                font-family: Arial;
                font-size: 12px;
            }
 
            #menuVertical li a{
                color:#000000;
                margin:0px;
                background:linear-gradient(#fff 0%,#ffffff 100%);
                background:-moz-linear-gradient(#fff 0%,#ffffff 100%);
                background:-ms-linear-gradient(#fff 0%,#ffffff 100%);
                background:-o-linear-gradient(#fff 0%,#ffffff 100%);
                background:-webkit-linear-gradient(#fff 0%,#ffffff 100%);
                border:solid 1px #cfcfcf;
                border-left-width: 0;
                /*border-radius:6px;*/
                padding:10px;
            }
            #menuVertical li a.selected {
                color: #ffffff;
                background: #b06a02;
                border:solid 1px #cfcfcf;
                border-left-width: 0;
                }
                
            #menuVertical li a:hover{
                background:linear-gradient(#b06a02 0%, #FFF 100%);
                background:-moz-linear-gradient(#b06a02 0%, #FFF 100%);
                background:-ms-linear-gradient(#b06a02 0%, #FFF 100%);
                background:-o-linear-gradient(#b06a02 0%, #FFF 100%);
                background:-webkit-linear-gradient(#b06a02 0%, #FFF 100%);
                border-left-width: 0;
                /*border-radius:6px;*/
                border:solid 1px #cfcfcf;
                color:#ffffff;
            }
            
            .flecha-text{
   position:relative;
 margin: 0 auto;
    width:90%;
    height: 47px;
 background: #b06a02;
 float: left;
 padding-right: 2px;
 padding-left: 32px;
    /*<div class="flecha-right"></div>*/
}
 .flecha-text:after {
 content: " ";
 position: absolute;
 display: block;
 width: 0;
 height: 0;
 }
 /* RIGHT ARROW */
.flecha-right:after {
 border-bottom: 25px solid transparent;
 border-top: 22px solid transparent;
 top:0px;
 }
 .flecha-right:after {
 border-left: 25px solid #b06a02;
 right: -25px;
 z-index: 2;
 }
 

Código HTML:

<div id='menuVertical'>
            <ul>    
                <li><div class="flecha-text flecha-right"><a href="http://www.forosdelweb.com/f53/obesidad" class="selected">  Obesidad  </a></div> </li>
                <li> <a href="http://www.forosdelweb.com/f53/piernas-cansadas"> Piernas Cansadas </a> </li>
                <li> <a href="http://www.forosdelweb.com/f53/tatuajes">  Tatuajes  </a> </li>
            </ul>
        </div>
 

Alguien se anima a echarme una mano?

Salu2