Da hast du wohl recht, allerdings sind die DIV's trotzdem überflüssig:

Leg einfach 2 Bilder an. Eines enthält den linken Teil (dieses machst du z.B. 200px breit, länger sollte ein Menüpunkt eh nicht sein) und eines das den rechten Teil enthält (dieses machst du nur so breit wie die schwarze Fläche).

Code: 
#head ul li {
    background: url(bg_li.png) repeat-x top left;
}

#head ul li:hover {
    background: url(bg_li_hover.png) no-repeat top left;
}

#head ul li:hover a {
    background: url(bg_li_hover_a.png) no-repeat top right;
}
So ließen sich in Verbindung mit einem padding zum Beispiel auch Runde Ecken oder Verläufe an den Rändern umsetzen.

Es wäre natürlich auch mit deinen beiden DIVs möglich, aber das Markup sollte eigentlich auch wirklich nur aus solchen bestehen. Schon allein aus Gründen der Barrierefreiheit.