Hover in css covering menu above it - html

Question

I have a menu with a drop down that works nicely but the issue I noticed is if you hover a link with a child element, it opens the menu, but the link then become unclickable on the menu on the bottom half.
<div class="desktop_navigation">
<ul>
<li>Link 1</li>
<li>Link 2
<ul>
<li>Link 2 child</li>
</ul>
</li>
<li>Link 3</li>
</ul>
</div>
That's the structure for the menu. The child elements are sub <ul> of the main <li> and then hidden using CSS until their parent <li> is hovered.
The following jFiddle will include all the CSS I am using and a working example of the issue I am currently having:
https://jsfiddle.net/nrzfa49s/

Answer 1

Your .desktop_navigation ul li ul is inheriting the padding-top: 30px from its parent ul (.desktop_navigation ul) which is covering the parent link (Link 2) making it unclickable.
To fix your problem, update these styles:
.desktop_navigation ul li ul {
list-style: none;
display: none;
padding-top: 0; /*remove the 30px padding*/
}
.desktop_navigation ul li:hover ul {
display: block;
position: absolute;
top: 100%; /*set your top value to be more dynamic based on the height of the parent*/
z-index: 890;
}
Here is a fiddle demoing this solution.
Normally when you style menus like this it is recommended to use the > when styling menu elements because of the nesting (i.e. .desktop_navigation > ul this will prevent the child ul from inheriting the padding)

Answer 2

Took some time, but the issue is here:
.desktop_navigation ul {
list-style: none;
padding: 0;
margin: 0;
padding-top: 30px; //remove this line
}

Answer 3

You only want the padding-top for the ul's to be on the parent/top-level menu. Then if you remove the top attribute from the nested menus, they will display after the link in the top-level menu.
.desktop_navigation a {
color: #ccc;
text-decoration: none;
display: inline-block;
padding: 12px;
transition: all 0.5s ease;
-webkit-transition: all 0.5s ease;
-moz-transition: all 0.5s ease;
-o-transition: all 0.5s ease;
}
.desktop_navigation ul li:hover a {
color: #fff;
background: #444;
text-decoration: none;
display: inline-block;
z-index: 1002;
padding: 12px;
transition: all 0.5s ease;
-webkit-transition: all 0.5s ease;
-moz-transition: all 0.5s ease;
-o-transition: all 0.5s ease;
}
.desktop_navigation ul li ul li a:link,
.desktop_navigation ul li ul li a:visited,
.desktop_navigation ul li ul li a:active {
z-index: 1001;
width: 100%;
display: block;
color: #444;
background: #fff;
transition: all 0.5s ease;
-webkit-transition: all 0.5s ease;
-moz-transition: all 0.5s ease;
-o-transition: all 0.5s ease;
}
.desktop_navigation ul li ul li a:hover {
width: 100%;
display: block;
color: #111;
z-index: 1002;
background: #ccc;
transition: all 0.5s ease;
-webkit-transition: all 0.5s ease;
-moz-transition: all 0.5s ease;
-o-transition: all 0.5s ease;
}
.desktop_navigation ul {
list-style: none;
padding: 0;
margin: 0;
}
.desktop_navigation > ul {
padding-top: 30px;
}
.desktop_navigation ul li {
display: inline-block;
position: relative;
padding: 0;
margin: 0;
z-index: 1002;
}
.desktop_navigation ul li ul {
list-style: none;
display: none;
}
.desktop_navigation ul li:hover ul {
display: block;
position: absolute;
z-index: 890;
}
.desktop_navigation ul li ul li {
float: none;
position: relative;
min-width: 180px;
z-index: 890;
}
<div class="desktop_navigation">
<ul>
<li>Link 1</li>
<li>
Link 2
<ul>
<li>Link 2 child</li>
</ul>
</li>
<li>Link 3</li>
</ul>
</div>