List style image con hover

[memoadian]

Hola estaba intentando hacer un menu con un list style image con hover, es decir que al pasar el mouse sobre el enlace de li, cambie el color tambien de el list. este es mi código actual:

Código CSS:

.joomla-nav{
    margin:0 0 0 100px;
    padding:0;
    border-top:1px solid #c9c9c9;
}
 
.joomla-nav li{
    font-size:14px;
    font-weight:bold;
    list-style-image:url(../../../../images/row.gif) no-repeat;
    border-bottom:1px solid #c9c9c9;
    padding:7px 0;
}
.joomla-nav li a{
    text-decoration:none;
    color:#c9c9c9;
}
.joomla-nav li a:hover{
    color:#0d84ba;
}
 

como ven con esto no cambia el list

agradecería cualquier cosa, hasta una web donde venga un menu así

gracias.

[memoadian]

No se de donde saque algo asi, pero funcionó¡ O_O¡

Código CSS:

.joomla-nav li{
    font-size:14px;
    font-weight:bold;
    list-style-type:none;
    border-bottom:1px solid #c9c9c9;
    padding:7px 15px;
    background:url(../../../../images/row.gif) no-repeat;
    background-position:0 12px;
}
 
.joomla-nav li:hover{
    font-size:14px;
    font-weight:bold;
    list-style-type:none;
    border-bottom:1px solid #c9c9c9;
    padding:7px 15px;
    background:url(../../../../images/row-hover.gif) no-repeat;
    background-position:0 12px;
}