drop down list wise xml all attribute value

Question

i have one xml file:-

<child_4 entity_id="4" value="Activities" parent_id="2">
    <child_10066 entity_id="10066" value="Physical1" parent_id="4">
        <child_10067 entity_id="10067" value="Cricket" parent_id="10066">
            <child_10068 entity_id="10068" value="One Day" parent_id="10067"/>
        </child_10067>
    </child_10066>
    <child_10069 entity_id="10069" value="Test2" parent_id="4"/>
    <child_10070 entity_id="10070" value="Test3" parent_id="4"/>
    <child_10071 entity_id="10071" value="Test4" parent_id="4"/>
    <child_10072 entity_id="10072" value="Test5" parent_id="4"/>
    <child_5 entity_id="5" value="Physical" parent_id="4"/>
</child_4>

i want to result some thing like this:-

Firlst Look:-

Activities
Test2
Test3
Test4
Test5
Physical

after click on Activities drop down there child list:-

Activities
          Physicall
Test2
Test3
Test4
Test5
Physical

if click on Physicall

Activities
          Physicall
                   Cricket
Test2
Test3
Test4
Test5
Physical

something like tree type
look like drop down menu...
thanks...

Answer 1

I made jquery version

var xml = [
'<child_4 entity_id="4" value="Activities" parent_id="2">',
    '<child_10066 entity_id="10066" value="Physical1" parent_id="4">',
        '<child_10067 entity_id="10067" value="Cricket" parent_id="10066">',
            '<child_10068 entity_id="10068" value="One Day" parent_id="10067"/>',
        '</child_10067>',
    '</child_10066>',
    '<child_10069 entity_id="10069" value="Test2" parent_id="4"/>',
    '<child_10070 entity_id="10070" value="Test3" parent_id="4"/>',
    '<child_10071 entity_id="10071" value="Test4" parent_id="4"/>',
    '<child_10072 entity_id="10072" value="Test5" parent_id="4"/>',
    '<child_5 entity_id="5" value="Physical" parent_id="4"/>',
'</child_4>'
].join('');

and code is :

function makeHtml( $xml , $ul ){

     $xml.each( function(){

            var $node =  $(this) ;

            var $li = $('<li></li>').html( $node.attr('value') );

            $ul.append( $li ); 

            if ( $node.children().length > 0 ) {

                 $childUl = $('<ul></ul>').hide(); 

                 $ul.append( $childUl ); 

                 // toggle hide and show
                 $li.click( function(){

                        if( $(this).next().css('display') == 'none') {
                            $(this).next().show();
                        } else {
                            $(this).next().hide();
                        }  
                 });

                 makeHtml( $node.children() , $childUl );
            }                        

    }); 
} 

makeHtml( $( xml ) , $('ul') );

and added in jsfiddle http://jsfiddle.net/PLH8D/3/