Close CSS dropdown menu onclick

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> 
                     <a href="#"><li>Lorem ipsum dolor</li></a>
                     <a href="#"><li>Consectetur adipisicing</li></a>
                     <a href="#"><li>Reprehenderit</li></a>
                     <a href="#"><li>Commodo consequat</li></a>

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

via Chebli Mohamed