Style the Child and not Grandchild? - html

Question

I am trying to make a 'fancy' navigation, with multiple ul/li. I think my problem is in the CSS with the child selector (>). If you run the code snippet provide you'll notice when you hover over li.first (item one) you can visibly see the div.hover-container although li:first>ul>li has the css with overflow: hidden; along with this div.hover-container is within li.one (example one) so why does it display when I hover over li.>one (other examples).
I am just confused and would love some input on this after staring and testing possible solutions for an hour.
EDIT: I apologize for how messy it looks in the snippet.
/* ================== Example ================ */
.example>ul {
display: flex;
position: relative;
height: 50px;
width: 800px;
margin: 50px auto;
list-style-type: none;
background-color: #5A827E;
}
.example>ul>li {
display: block;
height: 100%;
width: 33.3%;
border-right: 2px solid rgba(0, 0, 0, 0.5);
position: relative;
overflow: hidden;
color: white;
font-weight: bold;
text-align: center;
line-height: 50px;
font-style: italic;
}
.example>ul>li:hover {
overflow: visible;
background-color: #415E5B;
}
.first>ul {
display: block;
position: absolute;
top: 50px;
height: 400px;
width: 100.5%;
list-style-type: none;
background-color: #415E5B;
}
.first>ul>li {
display: block;
color: white;
line-height: 40px;
text-align: center;
height: 10%;
width: 100%;
border-top: 1px dotted rgba(255, 255, 255, 0.5);
font-weight: 400;
font-style: normal;
overflow: hidden;
}
.first>ul>li:hover {
background-color: white;
color: blue;
}
.hover-container {
display: flex;
justify-content: flex-start;
flex-flow: column wrap;
position: absolute;
left: 265px;
top: 0;
height: 400px;
width: 535px;
border: 3px solid gold;
}
.list-container {
display: block;
height: auto;
width: 30%;
border: 3px solid #F2D7E2;
}
.list-container h2 {
text-align: left;
color: darkgray;
font-weight: bold;
}
.list-container ul {
list-style-type: none;
text-align: left;
}
/* ------------------ Example END ---------------- */
<div class="example">
<ul>
<!-- first navigation container -->
<li class="first"> Item One
<ul>
<!-- dropdown -->
<li class="one"> Example 1
<!-- dropdown item -->
<div class="hover-container">
<!-- sidebar -->
<div class="list-container">
<!-- sidebar content box-->
<h2>Content Header One</h2>
<ul>
<li>Content One</li>
<li>Content Two</li>
<li>Content Three</li>
</ul>
</div>
<!-- sidebar content box END -->
<div class="list-container">
<!-- sidebar content box-->
<h2>Content Header One</h2>
<ul>
<li>Content One</li>
<li>Content Two</li>
<li>Content Three</li>
</ul>
</div>
<!-- sidebar content box END -->
</div>
<!-- sidebar END-->
</li>
<!-- dropdown item END -->
<li>Example 2</li>
<li>Example 3</li>
<li>Example 4</li>
<li>Example 5</li>
<li>Example 6</li>
<li>Example 7</li>
<li>Example 8</li>
<li>Example 9</li>
<li>Example 10</li>
</ul>
<!-- END of dropdown -->
</li>
<!-- main list item END -->
<li class="second">Item Two</li>
<li class="third">Item Three</li>
</ul>
</div>

Answer 1

If you want the hover-container div to be shown only when the first li(Example 1) is hovered, you need to replace the .hover-container you have added with the below CSS:
.first>ul>li:first-child:hover .hover-container{
display: flex;
justify-content: flex-start;
flex-flow: column wrap;
position: absolute;
left: 265px;
top: 0;
height: 400px;
width: 535px;
border: 3px solid gold;
}

Answer 2

Your child selectors seem okay. I think the problem is with your positioning. The .hover-container element has "position: absolute", meaning it's placed relative to its first positioned ancestor (see https://www.w3schools.com/css/css_positioning.asp). You want to determine if it's overflowing the .first>ul>li element above it, so that element needs a "position: relative."
Adding these rules should give the behavior you're looking for:
.first>ul>li {
position: relative;
...
}
.first>ul>li:hover {
overflow: visible;
...
}

Answer 3

The following CSS property rule defined on .hover-container set its position to absolute with respect to .example>ul>li which is the nearest ancestor that is a containing block (read about how the browser determines a containing block.)
.hover-container {
/*...*/
position: absolute;
/*...*/
}
The fix for this is to form a containing block with the li that is closest ancestor to .hover-container by setting its position to relative.
.first>ul>li {
/*...*/
position: relative;
/*...*/
}
Another fix for this is to set the overflow property to hidden for the closest containing block that is an ancestor to .hover-container.
.first>ul {
/*...*/
overflow: hidden;
/*...*/
}