Width of 3rd level of menu

I have a slide down menu. In HTML I have:

<menu>
    <li id="vysledky"><a href="#">Výsledky</a>
        <ul class="menu2">
            <li>2008
                <ul class="menu3">
                    <li><a href="#">21.08. - MMSR SCg</a></li>
                    <li><a href="#">R SCOOechová Potôň SK</a></li>
                    <li><a href="#">SCOOTER Brezová /Visonta/ HU</a></li>
                </ul>
            </li>
            <li>2010</li>
            <li>2011<</li>
        </ul>
    </li>
    <li id="forum"><a href="#" class="prvy"><span>Fórum</span></a></li>
</menu>

And now i want to automaticly set the width of each 3rd level of menu (menu3) by the longest text in it. So in this example the width of this .menu3 will be the width of text "SCOOTER Brezová /Visonta/ HU".

I can't use css because the width of menu2 is stable and if it will be longer than menu2 its set to width of menu2 (cascade) So i would use javascript (jquery). I have this code:

      var i;
    var podm;

    $('menu>li').each(function() {
        podm = 0;
        if($(this).children('ul').size()) {
            $(this).each(function() {

                if($(this).children('ul').size()) {
            $(this).each(function() {

                podm++;
                    i = 60;
$(this).find('li a').each(function() {
    var w = $(this).text();
    $('#js').text(w);
    w = $('#js').width();
    if(w > i) {
        i = w;
    }
});
                $(this).find("ul.menu3").css("width");
                });
            }
  开发者_运维问答          });
        }
    });

But this code works bad :-(.

Web: Here

You set the width of the menu3 ul to 345px which causes longer text to overlap. The Javascript just sets this width again.

<ul class="menu3" style="width: 345px; display: block; opacity: 0.13">

Try to remove the width specification and the jQuery code and check if it works. If you need a specific minimum width for the level 3 menu, you can use the min-width CSS attribute.

EDIT: Ok, spotted it. The problem is the position: relative attribute in .menu3. The CSS for .menu3 should look like this:

.menu3 {
    display: none;
    position: absolute; /* This changed */
    padding: 0;
    margin: 0;
    list-style: none;
    left: 100px;
    top: 0px; /* This changed */
    background: #464646 url('3menu-po.png') repeat-y;
    display: none;
    white-space: nowrap;
}

Note the position: absolute. This takes the submenu out of the document flow and therefore it is not affected by the width set in .menu2.