Problema con i div e id

[Werwolfe]

Buongiorno

Ragazzi ho creato un template tutto in div e id, ho creato la barra dei menu, il problema che ho : I link al passaggio del mouse dovrebbe cambiare lo sfondo per tutta la grandezza del blocco, invece non avviene, o meglio non colora tutta la grandezza del blocco, ma soffermandosi poco sopra le lettere, mentre verso il basso riempe tutto lo spazio, ho usato queste classi

Questo è la grandezza del menu

#menu {
    margin:0 auto;
    padding:0;
    margin-left: 0px;
    margin-top: 0px;
    display: inline;
    float: left;
    height: 43px;
    width: 683px;
    background-color: #1B1B1B;
}


#menu ul {
    list-style:none;
    padding:0;
    height:43px;
}
#menu ul li {
    margin:0;
    padding:0;
    float:left;
}
#menu ul li a {
    display:block;
    margin:0;
    font-size:14px;
    line-height:18px;
    font-weight:normal;
    color:#fff;
    text-decoration:none;
    padding-right: 20px;
    padding-left: 20px;
    padding-bottom: 0px;
    padding-top: 0px;
}
#menu ul li a:hover {
    text-decoration:none;
    color:#fff;
    background:#660000;
    height: 43px;    
}
 html è questo 
 <div id="menu">
           
             <ul>
          <li >[url="index.html"]<span>Home Page</span>[/url][*][url="#"]<span>Chi Siamo</span>[/url][*][url="#"]<span>Bridge</span>[/url][*][url="#"]<span>Burraco</span>[/url][*][url="#"]<span>Texas</span>[/url][*][url="#"]<span>Dove Siamo</span>[/url][*][url="#"]<span>Contatti</span>[/url][/list]
           
    </div> 

perchè non prende tutta la grandezza del blocco, height 43px?

grazie per le risposte