Just starting out with CSS and HTML here. I'm working on implementing a dropdown menu using the code below, but it closes when you move the mouse away from it. What I would like is for it to close only when clicked outside the dropdown menu. Can anyone provide a CSS fix to achieve this? You can find my code on JSFiddle at the following link Fiddle link. Your help is much appreciated. Here's how the HTML looks:
<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 here is the corresponding CSS:
#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 want the dropdown menu behavior to be as follows: 1) Click to show the dropdown. 2) Keep displaying when hovered over, even outside the dropdown. 3) Close when clicked somewhere else besides the dropdown.
Right now, I'm using hover selectors which is why it behaves that way. But I really want to change it to the above behavior and I'm not sure how.
<div id="main">
<div class="wrapper">
<div class="content">
<content>
</content>
</div>
<div class="parent">Drop Down Parent 1</div>