Dropdown menu problems

[zassadgh2]

I am using the jQuery Multi Level CSS Menu #2 from http://www.dynamicdrive.com/style/cs...el_css_menu_2/



As seen on the image above, it shows you when the problem occurs.
1st level: working fine
2nd level: working fine
3rd level: not working
Everything under 3rd level has the same problem.

By not working, I mean it doesn't show any children on the menu, it also removes the arrow.(see image)



HTML Code:

<div class="jqueryslidemenu" id="myslidemenu">        
    <ul id="dropdownNavigation">
<li>
<a href="../">Menu1</a>
</li>
<li>
<a href="/kom.aspx" style="padding-right: 23px;">Menu2<img style="border: 0pt none;" class="downarrowclass" src="../images/down.gif"></a>
<ul style="top: 35px; display: none; visibility: visible; left: 0px; width: 172px;">
<li>
<a href="/kom/ene.aspx">Example1</a>
</li>
<li>
<a href="/kom/tryk.aspx">Example2<img style="border: 0pt none;" class="rightarrowclass" src="../images/right.gif"></a>
<ul style="top: 0pt; display: none; visibility: visible; left: 172px; width: 172px;">
<li>
<a href="/kom/tryk/tek.aspx">Problem</a>
</li>
</ul>
</li>
</ul>
</li>
</ul>    
    <br style="clear: left;">
    </div>

Javascript Code:

/*********************
//* jQuery Multi Level CSS Menu #2- By Dynamic Drive: http://www.dynamicdrive.com/
//* Last update: Nov 7th, 08': Limit # of queued animations to minmize animation stuttering
//* Menu avaiable at DD CSS Library: http://www.dynamicdrive.com/style/
*********************/

//Update: April 12th, 10: Fixed compat issue with jquery 1.4x

//Specify full URL to down and right arrow images (23 is padding-right to add to top level LIs with drop downs):
var arrowimages={down:['downarrowclass', '../images/down.gif', 23], right:['rightarrowclass', '../images/right.gif']}

var jqueryslidemenu={

animateduration: {over: 200, out: 100}, //duration of slide in/ out animation, in milliseconds

buildmenu:function(menuid, arrowsvar){
    jQuery(document).ready(function($){
        var $mainmenu=$("#"+menuid+">ul")
        var $headers=$mainmenu.find("ul").parent()
        $headers.each(function(i){
            var $curobj=$(this)
            var $subul=$(this).find('ul:eq(0)')
            this._dimensions={w:this.offsetWidth, h:this.offsetHeight, subulw:$subul.outerWidth(), subulh:$subul.outerHeight()}
            this.istopheader=$curobj.parents("ul").length==1? true : false
            $subul.css({top:this.istopheader? this._dimensions.h+"px" : 0})
            $curobj.children("a:eq(0)").css(this.istopheader? {paddingRight: arrowsvar.down[2]} : {}).append(
                '<img src="'+ (this.istopheader? arrowsvar.down[1] : arrowsvar.right[1])
                +'" class="' + (this.istopheader? arrowsvar.down[0] : arrowsvar.right[0])
                + '" style="border:0;" />'
            )
            $curobj.hover(
                function(e){
                    var $targetul=$(this).children("ul:eq(0)")
                    this._offsets={left:$(this).offset().left, top:$(this).offset().top}
                    var menuleft=this.istopheader? 0 : this._dimensions.w
                    menuleft=(this._offsets.left+menuleft+this._dimensions.subulw>$(window).width())? (this.istopheader? -this._dimensions.subulw+this._dimensions.w : -this._dimensions.w) : menuleft
                    if ($targetul.queue().length<=1) //if 1 or less queued animations
                        $targetul.css({left:menuleft+"px", width:this._dimensions.subulw+'px'}).slideDown(jqueryslidemenu.animateduration.over)
                },
                function(e){
                    var $targetul=$(this).children("ul:eq(0)")
                    $targetul.slideUp(jqueryslidemenu.animateduration.out)
                }
            ) //end hover
            $curobj.click(function(){
                $(this).children("ul:eq(0)").hide()
            })
        }) //end $headers.each()
        $mainmenu.find("ul").css({display:'none', visibility:'visible'})
    }) //end document.ready
}
}

//build menu with ID="myslidemenu" on page:
jqueryslidemenu.buildmenu("myslidemenu", arrowimages)

CSS Code:

panel{
margin-top: 30px;
}

.sidebarmenu ul{
margin: 0;
padding: 0;
list-style-type: none;
font-family: "Lucida Grande", Arial, sans-serif;
font-size: 12px;
font-weight: normal;
width: 170px; /* Main Menu Item widths */
border-bottom: 1px solid #ccc;
}
 
.sidebarmenu ul li{
position: relative;
}

/* Top level menu links style */
.sidebarmenu ul li a{
display: block;
overflow: auto; /*force hasLayout in IE7 */
color: white;
text-decoration: none;
padding: 6px;
border-bottom: 1px solid #778;
border-right: 1px solid #778;
}

.sidebarmenu ul li a:link, .sidebarmenu ul li a:visited, .sidebarmenu ul li a:active{
background-color: #014272; /*background of tabs (default state)*/
}

.sidebarmenu ul li a:visited{
color: white;
}

.sidebarmenu ul li a:hover{
background-color: black;
}

/*Sub level menu items */
.sidebarmenu ul li ul{
position: absolute;
width: 170px; /*Sub Menu Items width */
top: 0;
visibility: hidden;
}

Any idea what is wrong?
I don't know Javascript but I guess that is the one doing it, but can't see any problem in it?

Thanks in advance

[forumfish]

Turn off the javascript and test it with just css first. See if there are any css items that need to be flagged in order to activate the arrows or the display. Usually the drop-down menus function no problem with just css and the JS is attached just to make it smoother.