Can someone please guide me on how to create a dropdown menu that activates with a click instead of hover? I want the menu to appear when clicked and disappear when clicking outside of it, similar to the Facebook news feed option. Below is my code:
<head>
<style type="text/css">
#menu{margin:0; padding:0}
#menu ul{margin:0; padding:0; line-height:20px;}/*dropdown*/
#menu li{margin:0; padding:0; list-style:none;float:left; position:relative;}
#menu ul li a{text-align:center; fot-family:"arial"; text-docoration-none; height:30px; width:150px; display:block; color:#333fff}
#menu ul ul{position:absolute;visibility:hidden}
#menu ul li:hover ul{visibility:visible}
/*---highlight list has i rollover it--*/
#menu ul li:hover ul li:hover {background:#ccc}
</style>
</head>
<div id="wrapper" style="backgroud-color:blue">
<div id="menu">
<ul >
<li><a href="#" onclick="return false;">Drop</a>
<ul>
<li><a href="#">link 1</a>
<li><a href="#">link 2</a>
<li><a href="#">link 3</a>
</ul><!--end inner ul -->
</li><!--end main li -->
</ul><!--end main ul -->
</div><!--end menu ul -->
</div>
<div></div>