Portal Top level navigation customization issue with drop down

Hello Experts,

I am facing a customization problem in the top level navigation(tln). Below is the scenario and our approach.

Following is the jsp code in two steps

1. Customization: The first level of navigation should come in a drop down box (e.g. content admin, User Admin, System admin is listed in a drop down) as follows:

<ul id="nav1">

    <li class="Level1">

     <select id="dropd" >

        <nav:iterateInitialNavNodes>

            <option>       

                <nav:ifNavNodeInSelectedPath>

                    <nav:navNodeAnchor navigationMethod="byEPCM" useQuickLink="true" />

                    <nav:storeNavNode/>

                </nav:ifNavNodeInSelectedPath>

               <nav:ifNotNavNodeInSelectedPath>

                    <nav:navNodeAnchor navigationMethod="byEPCM" useQuickLink="true"/>

               </nav:ifNotNavNodeInSelectedPath>

            </option>

        </nav:iterateInitialNavNodes>

    </select></li>

</ul>

</div>   

2. Once we select the entry from drop down box, its children i.e. the second and third level should appear at the top level navigation

<div id="menu">

    <nav:recallNavNode id="first">

            <ul id="nav" >

                <nav:iterateNavNodeChildren>

                    <li class="Level1">

                        <nav:ifNavNodeInSelectedPath>

                            <nav:navNodeAnchor navigationMethod="byEPCM" useQuickLink="true" anchorAttributes="class=\"selected\""/>

                        </nav:ifNavNodeInSelectedPath>

                        <nav:ifNotNavNodeInSelectedPath>

                            <nav:navNodeAnchor navigationMethod="byEPCM" useQuickLink="true"/>

                        </nav:ifNotNavNodeInSelectedPath>

                            <nav:ifNavNodeHasChildren>

                                <ul>

                                    <div class="wrapper">

                                        <nav:iterateNavNodeChildren currentNavNode="currentNodeL3">                                       

                                            <li class="Level2">

                                                <a href="javascript:doNavigate('<%=currentNodeL3.getHashedName()%>',0)">  <%=currentNodeL3.getTitle(userLocale)%> </a>

                                            </li>

                                        </nav:iterateNavNodeChildren>

                                    </div></ul>

                            </nav:ifNavNodeHasChildren>

                    </li>

                </nav:iterateNavNodeChildren>

            </ul>

        </nav:recallNavNode>       

    </div>

Problem : Above approach renders top level navigation (Both second and third level) only for default selected node in the dropdown(e.g. if default entry to drop down is Content admin then it is correctly showing its TLN (second and third level)). 

However if I select any other entry form drop down (e.g. user admin, system admin), its corresponding TLN is not being rendered .

Also, is any handling of onChange() event for the dropdown needed?

Please suggest if I am missing anything or other suitable approach.

Regards,

VP