Hey friends

I'm creating a menu simiilar to Windows start menu that once clicked, other submenus pop up.
However, it doesn't seem to work.
Could you please show me what I'm doing wrong?

Here is my code:

HTML:

HTML Code:
<html>
<head>

 <link rel="stylesheet" type="text/css" href="menu.css">
 
 </head>
<body>

<script>
$('.menu').click(function(e) { e.stopPropagation(); $(this).next().toggle(); });
$('body').click(function() { $('.menu').next().hide(); });
</script>

<div id="menu">
<ul>
<li><a href="javascript:void(0);" class="menu"><p>Start</p></a>
<div class="submenu">
<ul>
<li><a href=""><p>Documents</p></a></li>
<li><a href=""><p>Images </p></a></li>
<li><a href=""><p>Videos</p></a></li>
<li><a href=""><p>Settings</p></a></li>
<li><a href=""><p>Log off</p></a></li>
</ul>
</li>
</ul>
</div>
</div>


</body>
</html>
CSS:

Code:
body{background-color:grey;}

#menu li{width:200px; float:left;list-style-type:none;
position:relative; top:530px; left:-47px;}
#menu a{ border-radius:15px; display:block; color:white;
text-indent:55px; border:1px solid white; background-color:black;
font-size:18pt; font-weight:bold; text-decoration:none;}
#menu a:hover{color:black; background: white;}

#menu ul .submenu li{height:75px; float:left; width:250px;}
#menu li .submenu{position:absolute; left:20px; top:-907px;
width:10px; height:200px; display:none;}


#menu li:active .submenu{display:block; float:left;  height:200px;}