Keep hover state on while hovering on margin - html

Question

I want to maintain the hover state while hovering on margin. Things are working fine when I remove position absolute. Technically everything seems to be fine. The element which has margin is in the inside of element which is being hovered. Is it the expected behaviour if not then what is issue exactly.
.dropbtn {
background-color: #4CAF50;
color: white;
padding: 16px;
font-size: 16px;
border: none;
}
.dropdown {
position: relative;
display: inline-block;
}
.dropdown-content {
display: none;
position: absolute;
margin-top:20px;
background-color: #f1f1f1;
min-width: 160px;
box-shadow: 0px 8px 16px 0px rgba(0,0,0,0.2);
z-index: 1;
}
.dropdown-content a {
color: black;
padding: 12px 16px;
text-decoration: none;
display: block;
}
.dropdown-content a:hover {background-color: #ddd;}
.dropdown:hover .dropdown-content {display: block;}
.dropdown:hover .dropbtn {background-color: #3e8e41;}
<div class="dropdown">
<button class="dropbtn">Dropdown</button>
<div class="dropdown-content">
Link 1
Link 2
Link 3
</div>
</div>

Answer 1

This is the expected behavior. Even though .dropdown-content is a child of .dropdown, since .dropdown-content is absolutely positioned, it's as though it's floating outside of .dropdown. If you inspect the .dropdown element in your browser, you'll see that its size only covers the .dropbtn and does not include .dropdown-content.
One way to fix this is to use padding instead of margin on .dropdown-content. However this will expand the size of the content and not leave a gap like it would by using margin.
So if you want to keep the 20px gap between the button and the hover menu, you can add another div around the links:
<div class="dropdown">
<button class="dropbtn">Dropdown</button>
<div class="dropdown-content">
<div class="dropdown-inner">
Link 1
Link 2
Link 3
</div>
</div>
</div>
And then put the background / shadow styles on the inner div instead:
.dropbtn {
background-color: #4CAF50;
color: white;
padding: 16px;
font-size: 16px;
border: none;
}
.dropdown {
position: relative;
display: inline-block;
}
.dropdown-content {
display: none;
position: absolute;
padding-top: 20px;
min-width: 160px;
z-index: 1;
}
.dropdown-inner {
background-color: #f1f1f1;
box-shadow: 0px 8px 16px 0px rgba(0,0,0,0.2);
}
https://codepen.io/anon/pen/RJxGmp

Answer 2

An aproach to achive this is to use a pseudo element (:before) so you can place an invisible block on the gap of this two elements, so you dont lose the hover state when you reach the end of the dropdown container
.dropbtn {
background-color: #4CAF50;
color: white;
padding: 16px;
font-size: 16px;
border: none;
display:block;
}
.dropdown {
position: relative;
display: inline-block;
}
.dropdown:after{
content:"";
position:absolute;
left:0px;
bottom:-20px;
display: none;
vertical-align: bottom;
width: 100%;
min-width: 160px;
height: 20px;
background-color: transparent;
}
.dropdown-content {
display: none;
position: absolute;
margin-top:20px;
background-color: #f1f1f1;
min-width: 160px;
box-shadow: 0px 8px 16px 0px rgba(0,0,0,0.2);
z-index: 1;
}
.dropdown-content a {
color: black;
padding: 12px 16px;
text-decoration: none;
display: block;
}
.dropdown-content a:hover {background-color: #ddd;}
.dropdown:hover .dropdown-content {display: block;}
.dropdown:hover:after{ display:inline-block;}
.dropdown:hover .dropbtn {background-color: #3e8e41;}
<div class="dropdown">
<button class="dropbtn">Dropdown</button>
<div class="dropdown-content">
Link 1
Link 2
Link 3
</div>
</div>