strano comportamento link: in alcuni <li> sottolinea, in altri no

[luke73]

Buongiorno a tutti. mi scuso se il titolo non è molto chiaro
provo a spiegarmi meglio

<div class="bar" style="background-image:url(IMAGES/<%= BG%>2.jpg); ">
            <ul>
                [*][url="index.asp"]Home Page[/url]
                [*][url="index.asp?MAX1=<%= MAX1%>"]Chi Siamo[/url]
                [*][url="index.asp?PG=02&MAX1=<%= MAX1%>"]Dove siamo[/url]
                [*][url="index.asp?PG=8&MAX1=<%= MAX1%>"]Condizioni di Vendita[/url]
                [*][url="index.asp?PG=131&MAX1=<%= MAX1%>"]NEWS[/url]
            [*][url="index.asp?PG=11&MAX1=<%= MAX1%>"]Contatti[/url]
            [*][url="index.asp?PG=141&&MAX1=<%= MAX1%>"]MAILING LIST[/url]
            [/list]
        </div> 

passando il mouse sui link CONDIZIONI, NEWS, CONTATTI, MAILING l'underline funziona correttamente in qualsiasi punto del link lo faccia passare
Sui primi 3 link, invece (home page, chi siamo e dove siamo) l'underline appare solamente quando il mouse passa sulla "linea di base" della parola/link altrimenti non si vede

questo è lo style:

.bar { 
    clear: both;
    font-size: 1.1em;
    height: 30px; 
    color: #FFF;
    margin: 0 0 0 0px;
    /*background-image:url(BG2.jpg);*/
    background-repeat:no-repeat;
    /*background: #FF9148;*/

}

    .bar li { 
    
        margin: 0; 
        padding: 7px 12px 5px 12px;
        color: #FFEADC;
        /*background: #FF9148;*/
        float: left; 
    }
    
    .bar li.active { 
        color: #E0691A;
        font-weight: normal; 
        padding: 7px 10px 6px 10px;
        text-transform:uppercase;
    }
    
    .bar li a { 
        font-weight: normal;
        color: #336799; 
        background: inherit;
        text-decoration: none;
        text-transform:uppercase;
        font-size:12px;

    } 
    
    .bar li a:hover { 
        color: #336799; 
        background: inherit;
        text-decoration: underline;

    } 

un salutone