Overlapping sub-levels in CSS dropdown menu

[empk]

Hi,
I've written a code for css drop-down menu which has 3 sub-levels. But I find that the 3rd sub-levels are overlapped. My code is as under.

Code snippet
*************** **

<li><a class="hide" href="#nogo" title="Query ">QUERY &gt;<!--[if gte IE 7]><!--></a><!--<![endif]--> 
        <!--[if lte IE 6]><table><tr><td><![endif]--><ul>
       <li><a class="hide" href="#nogo">By Books Of A/c. »<!--[if gte IE 7]><!--></a><!--<![endif]--> 
	       <!--[if lte IE 6]><table><tr><td><![endif]--><ul>
	       <li><a href="#nogo" >TRANSACTIONS</a></li>
	       <li><a href="#nogo" >A/CS.OPENED</a></li>
               <li><a href="#nogo" >A/CS.CLOSED</a></li>
	       </ul><!--[if lte IE 6]></td></tr></table></a><![endif]-->
       </li>
       
       <li><a class="hide" href="#nogo" >By Posting Id »<!--[if gte IE 7]><!--></a><!--<![endif]-->
	      <!--[if lte IE 6]><table><tr><td><![endif]--><ul>
	      <li><a href="#nogo" title="Transactions">TRANSACTIONS</a></li>
	      <li><a href="#nogo" title="A/cs.opened">A/CS.OPENED</a></li>
    	      <li><a href="#nogo" title="A/cs.closed">A/CS.CLOSED</a></li>
	      </ul><!--[if lte IE 6]></td></tr></table></a><![endif]-->
            
              </ul>
       </li>
</li>

Menu displayed by code above
*************** *************** *****
QUERY > By Books of A/c. >> Transactions
By Posting Id >> Transactions
A/cs.Opened
A/cs.Closed


The intended drop down style
*************** *************** *******
QUERY > By Books of A/c. >> Transactions
A/cs.Opened
A/cs.Closed
By Posting Id >> Transactions
A/cs.Opened
A/cs.Closed
Can someone throw some light as to where am going wrong.

Thanks in advance,
empk.