Hey guys

I need help with a drop down menu I created.
I want it to reveal other sub-menus once the user clicks on it, instead of hovering with the mouse.
Is that possible?

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>

</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;}

/*secondary foundation*/
#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;}

/*main foundation*/
#menu li:hover .submenu{display:block; float:left;  height:200px;
}