How I can hide this text box

How I can hide this text box

Hello!

This is my code:

  1. <!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
  2. <html xmlns="http://www.w3.org/1999/xhtml">
  3. <head>
  4. <meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
  5. <title>Untitled Document</title>
  6. <style type="text/css">
  7. ul { list-style-type: none;  padding: 5; }
  8. div#box { width: 800px; height: 500px; margin-left: -100px; margin-top: -35px; position: absolute; left: 20%; top: 10%; border-width: 1px;  border-style: dotted; }
  9. div#box1 { width: 800px; height: 100px; margin-left: -100px; margin-top: -35px; position: absolute; left: 24%; top: 18%; border-width: 1px;  border-style: dotted; }
  10. </style>
  11. <script src="jquery.js" type="text/javascript"></script>
  12. <script type="text/javascript">$(document).ready( function() {
  13.         $('ul li').toggle(function() { unroll(this); }, function() { roll(this); });
  14.         roll($('ul li'), true);
  15.     });
  16.     function unroll(parent) {
  17.         $(parent).children('ul').slideDown('normal');
  18.     }
  19.     function roll(parent) {
  20.         $(parent).find('ul').slideUp('normal');
  21.     }</script>
  22. </head>
  23. <body>
  24. <div id="menu">
  25. <ul><li>Main menu<ul><li><div id="box">Text Text Text Text Text Text</div></div></li></ul>
  26. </li>
  27. </ul>
  28. <ul><li>Maine menu1</a><ul><li>- menu 1<ul><li><div id="box1"><img src="music.jpg" widt="100" height="100"/></div>
  29. </li></ul><li>- menu 2</li><li>- menu 3</li></li></ul></ul>
  30. </body>
  31. </html>
All I want to do is hide this <div id="box"> with text after clicking on Main Menu1. Look at the screen - I want to hide this one with black arrow after click on menu1, 2 or 3 or MM1 (red arrow). How I can resolve this? And how I can hide <div id="box1"> after click on Main Menu?

Sorry for bad english.