mouse over

mouse over

Hi,
 
mouse over to Link text will show level 1 for About Us and Contact Us and then mouse over About Us sub link show under about us.  Instead of sub link shows under About Us, how can i make it shows on the right side?  Can you pls help?- thx
 
 <script type="text/javascript">
        $(document).ready(function()
        {

$("#show_div").mouseover(function() { $("#level1").css('visibility','visible'); });
$("#level1").mouseover(function() { $("#level1").css('visibility','visible'); });
$("#level1").mouseout(function() { $("#level1").css('visibility','hidden'); });


 
$("#show_div2").mouseover(function() { $("#level2").css('visibility','visible'); });
$("#level2").mouseover(function() { $("#leve2").css('visibility','visible'); });
$("#level2").mouseout(function() { $("#level2").css('visibility','hidden'); });

        });
        </script>
 <a id="show_div" href="#">Link text</a>
    <div id="level1" style="visibility:hidden;">
     <ul>
      <li><a href="##" id="show_div2">About Us</a></li>
       <div id="level2" style="visibility:hidden;">
         <a href="">test1</a>
        </div>
      <li><a href="">Contact Us</a></li>
    </ul>
    </div>