Close CSS dropdown menu onclick - html

Question

I'm very new to CSS and HTML combination. I'm trying to make use of following code for dropdown menu. But when mouse is moved away from dropdown menu, it gets closed. I would like to close it onclick outside the dropdown menu. Can anyone suggest me a fix in CSS to achieve this? JSFiddle for me code is at following location Fiddle link. Your help will be much appreciated. HTML looks like this.
<div id="main">
<div class="wrapper">
<div class="content">
<content>
<div>
<ul>
<li>Lorem ipsum dolor</li>
<li>Consectetur adipisicing</li>
<li>Reprehenderit</li>
<li>Commodo consequat</li>
</ul>
</div>
</content>
</div>
<div class="parent">Drop Down Parent 1</div>
</div>
And CSS looks like this
#main {
margin: 30px 0 50px 0;
font-family: Helvetica Neue, Helvetica, Arial, sans-serif;
}
#main .wrapper {
display: inline-block;
width: 180px;
margin: 0 10px 0 0;
height: 20px;
position: relative;
}
#main .parent {
height: 100%;
width: 100%;
display: block;
cursor: pointer;
line-height: 30px;
height: 30px;
border-radius: 5px;
background: #F9F9F9;
border: 1px solid #AAA;
border-bottom: 1px solid #777;
color: #282D31;
font-weight: bold;
z-index: 2;
position: relative;
-webkit-transition: border-radius .1s linear, background .1s linear, z-index 0s linear;
-webkit-transition-delay: .8s;
text-align: center;
}
#main .parent:hover, #main .content:hover ~ .parent {
background: #fff;
-webkit-transition-delay: 0s, 0s, 0s;
}
#main .content:hover ~ .parent {
border-bottom-left-radius: 0;
border-bottom-right-radius: 0;
z-index: 2;
}
#main .content {
position: absolute;
top: 0;
display: active;
z-index: 2;
height: 0;
width: 180px;
padding-top: 30px;
-webkit-transition: height .5s ease;
-webkit-transition-delay: .4s;
border: 1px solid #777;
border-radius: 5px;
box-shadow: 0 1px 2px rgba(0, 0, 0, .4);
}
#main .wrapper:active .content {
height: 123px;
z-index: 3;
-webkit-transition-delay: 0s;
}
#main .content div {
background: #fff;
margin: 0;
padding: 0;
overflow: hidden;
height: 100%;
border-bottom-left-radius: 5px;
border-bottom-right-radius: 5px;
}
#main .content:hover {
height: 123px;
z-index: 3;
-webkit-transition-delay: 0s;
}
I'm looking at something like this and will set new content to content tag. What I'm really looking at is following
1) Click on dropdown menu. Show the dropdown.
2) When hovered on it keep displaying. When hover outside dropdown keep showing it.
3) When clicked somewhere outside dropdown then close the dropdown.
I know I'm using hover selector so my behavior is like that. But I want to covert it to above behavior and I don't know how to do it.
<div id="main">
<div class="wrapper">
<div class="content">
<content>
</content>
</div>
<div class="parent">Drop Down Parent 1</div>

Answer 1

Your HTML is wrong. If you see, you have wrapped <li> inside the <a> tag. That's a basic issue you have. And there are other issues.
Change your existing HTML:
<a><li>...</li></a>
To the right form:
<li><a>...</a></li>
And then the click works. An <a> cannot contain an <li> inside it. So the click doesn't happen.