set all nested li's to be width of widest li

Question

How do I make nested li\'s the same width?

When I use the below code each nested li is only as wide as it\'s text + margin.

I\'d like all of the li\'s to be

Answer 1

There would be a very simple dynamic solution. To your CSS, as you posted it in the Question, just add

#menu ul {
    display: inline-block;
    min-width: 100px;
}

#menu ul li, #menu ul li a{
    width: 100%;
    display:block;
}

and then it will be exactly as you want it to be.

You can see how it looks here: