Hi guys

I'm trying to create a menu that once it's clicked, other sub menus would pop out (something similar to Windows Start menu).

I probably need Java Script to accomplish this.
I have zero knowledge of JS, but I'm willing to learn.
Your help is greatly appreciated!

Here is my code:

HTML:
Code:
<html>
<head>

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

<div id="menu">
<ul>
<li><a href=""><p>Start</p></a>
<div class="submenu">
<ul>
<li><a href=""><p>Images </p></a></li>
<li><a href=""><p>Videos</p></a></li>
<li><a href=""><p>Documents</p></a></li>
<li><a href=""><p>Settings</p></a></li>
<li><a href=""><p>Log off</p></a></li>
</ul>
</li>
<li><a href=""><p>menu 2</p></a></li>
<li><a href=""><p>menu 3</p></a></li>
<li><a href=""><p>menu 4</p></a></li>
<li><a href=""><p>menu 5</p></a></li>
</ul>
</div>
</div>


</body>
</html>
CSS:


Code:
body{background-color:grey;}

#menu li{width:200px; float:left; list-style-type:none;}
#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; 
width:10px; height:200px; display:none;}


#menu li:hover .submenu{display:block;}