In search of the perfect drop-down menu: stretch to full width, equal width elements, pure CSS. Help solve the problem

Question

In search of the perfect drop-down menu: stretch to full width, equal width elements, pure CSS. Help solve the problem

I am trying to implement a menu with the following functions:

horizontal
menu items of equal width;
menu items are spread over the entire width of the page (and not just on the left side);
dynamic (css rules should not rely on a predetermined number of elements);
drop-down second level with vertically aligned elements;
pure CSS (no JS!).

This seems to describe the perfect menu as I see it.

I almost succeeded in doing this using a beautiful technique display: table-cell;(tags omitted for simplicity):

<ul>
    <li>Menu item</li>
    <li>
        Expandable ↓
        <ul>
            <li>Menu</li>
            <li>Menu item</li>
            <li>Menu item long</li>
        </ul>
    </li>
    <li>Menu item</li>
    <li>Menu item</li>
</ul>

ul {
    display: table;
    table-layout: fixed;
    width: 100%;
}

li {
    display: table-cell;
    text-align: center;    
}

li:nth-child(even){
    background-color: lightblue;    
}

li:nth-child(odd){
    background-color: lightskyblue;    
}

li ul { display: none; }

li:hover ul {
    display: block;
    position: absolute;
}

li:hover ul li {
    display: block;
}