Code:
<STYLE type='text/css'>
li.oItem { color: #FF0000; cursor: text; } ;
li.oParent { color: #008000; cursor: hand; } ;
ul ul { display: none; } ;
</STYLE>
<SCRIPT LANGUAGE='Javascript'>function checkParent( src, tagName ) {
        while ( src != null ) {
            if (src.tagName == tagName) 
                return src;
            src = src.parentElement;
        }
        return null;
    }


    function checkContent( src, tagName ) {
        var pos = src.sourceIndex ;
        while ( src.contains( document.all[++pos] ) )
            if ( document.all[pos].tagName == tagName )
                return document.all[pos] ;
        return null ;
    }

    function outlineAction() {     
        var src = event.srcElement ;
        var item = checkParent( src, "LI" ) ;

        if ( parent != null ) {
            var content = checkContent( item, "UL" ) ;

            if ( content != null )
                if ( content.style.display == "" )
                    content.style.display = "block" ;
                else
                    content.style.display = "" ;
        }
        event.cancelBubble = true;
    }
</SCRIPT>
    <DIV onClick="JavaScript: outlineAction();">
        <UL>
            <LI class='oParent'>Test1
            <UL>
                <LI class='oParent'>Test11
                <UL>
                    <LI class='oItem'>Test111</LI>
                    <LI class='oItem'>Test112</LI>
                </UL></LI>
            </UL></LI>
            <LI class='oParent'>Test2
            <UL>
                <LI class='oParent'>Test21
                <UL>
                    <LI class='oParent'>Test211
                    <UL>
                        <LI class='oItem'>Test2111</LI>
                    </UL></LI>
                </UL></LI>
                <LI class='oItem'></LI>
            </UL></LI>
        </UL>
    </DIV>