Hallo everyone

I know this problem have been answered a lot of times, but I need some help still, cause I can't get it to work.

The css works in that way, that there is are 5 folders (Which can have fixed names) in the beginning. When clicking on one of them a dropdown comes in, which is another div that is located in a different "place" in the code so for the top part it looks like this:

<div id="main-nav">
            <span>
                <ul id="nav">
                    <li><a href="#" class="navbutton">Title 1</a></li>
                    <li><a href="#" id="kompetencerbutton">Title 2</a></li>
                    <li><a href="#" id="productbutton">Title 4</a></li>
                    <li><a href="#" class="navbutton">title 3</a></li>
                    <li><a href="#" class="navbutton">title 5</a></li>
                </ul>
            </span>
        </div>
        <!-- Language button above Search button, which has a dropdown field -->
        <div id="search">
            <ul>
                <li><a href="#">Language</a></li>
                <li><a href="#">Search</a>
                    <ul>          
                        <li><form><input type="text" name="searchbar" id="search-bar" /></form></li>
                    </ul>
                </li>
            </ul>
        </div>

Another place in the html code, we have the dropdown div:

<div id="rightinfo">
                <ul>
                    <li class="droppedmenu-button"><a href="#" id="droppedmenu_button01">Random stuff</a></li>
                    <li class="droppedmenu-button"><a href="#" id="droppedmenu_button02">Random stuff</a></li>
                    <li class="droppedmenu-button"><a href="#" id="droppedmenu_button03">Random stuff</a></li>
                    <li class="droppedmenu-button"><a href="#" id="droppedmenu_button04">Random stuff</a></li>
                    <li class="droppedmenu-button"><a href="#" id="droppedmenu_button05">Random stuff</a></li>
                </ul>
                <ul>
                    <li class="droppedmenu-button"><a href="#" id="droppedmenu_button06">Random stuff</a></li>
                    <li class="droppedmenu-button"><a href="#" id="droppedmenu_button07">Random stuff</a></li>
                    <li class="droppedmenu-button"><a href="#" id="droppedmenu_button08">Random stuff</a></li>
                    <li class="droppedmenu-button"><a href="#" id="droppedmenu_button09">Random stuff</a></li>
                    <li class="droppedmenu-button"><a href="#" id="droppedmenu_button10">Random stuff</a></li>
                </ul>
            </div>

These are connected though the ID's (Which I got to work). As you can see there is Right_info and another div. They each have a folder in the, called left and right, which should tell which side of the dropdown menu they are going to be placed in.

My question is, how do I make the second xslt loop through. So that each topmenu have the right dropdown menu, in the way my html / javascript is build.

My xslt kode as it looks now:

<xsl:variable name="dropDown" select="1"/>
<xsl:template match="/">

    <ul> 
        <xsl:for-each select="$currentPage/self::* [@level=$dropDown]/* [@isDoc]"> 
          <li><a href="{umbraco.library:NiceUrl(@id)}"><xsl:value-of select="@nodeName"/></a></li> 
       </xsl:for-each>         
    </ul>

</xsl:template>

I hope this makes sence and someone have a good idea how to solve this.

Thanks in advance.