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

I used following CoffeeScript to achieve described behavior:

$ ->
    menu_toggle = (e, show) ->
        ul = $(e).find('ul')
        ul.toggle()

        computed = ul.hasClass 'computed_width'
        if show && !computed
            ul.width 2000 # enormous with to be sure that li’s’ texts are not wrapped
            max_width = 0
            ul.find('li').each ->
                li = $(this)
                width = li.width()
                max_width = width if width > max_width
            ul.width max_width + 30 if max_width # 20 is 2 * padding + some reserve
            ul.toggleClass 'computed_width' # no need to compute every time

    $('li').has('ul').hover ->
        menu_toggle this, true
    , ->
        menu_toggle this, false