Make all <li> same width as the widest

I've got this menu wich is setup inline and has dropdowns.
The inner ul has a background.
Each dropdown li has a :hover that changes the background of the li:

<div id="navMain">
    <ul>
        <li><a href="#nogo">Forside</a>
            <ul>
                <li><a href="#nogo">1111111111111</a></li>
                <li><a href="#nogo">Link 1-2</a></li>
                <!-- etc. -->
            </ul>
        </li>
        <li><a href="#nogo">Om Os</a>
            <ul>
                <li><a href="#nogo">Link 2-1</a></li>
                <li><a href="#nogo">Link 2-2</a></li>
                <!-- etc. -->
            </ul>
        </li>
        <li><a href="#nogo">Link 3</a>
            <ul>
                <li><a href="#nogo">Link 3-1</a></li>
                <li><a href="#nogo">Link 3-2</a></li>
                <!-- etc. -->
            </ul>
        </li>
    </ul>
</div>

Problem is, that when one of the submenu li is longer than the others, it will only expand itself, and not the other li ofcourse.
This results in the :hover effect having different lengths.

So how would i make all li in each inner ul the same size as the widest one?

Here you can find the CSS if needed.