Dropdown list items above other list items? - html

Question

I have a rather large navigation bar - when the browser is resized it pushes some list items below, which I understand. However, when you hover over the list items on the top row, the dropdowns fall behind the list items that were pushed onto a second line. This is what I mean:
How can I get the "example" list items to sit above the list items on the second line (Supplier Directory and Travel Trade in this case). It's probably something really simple that I'm missing somewhere. Thanks!
I've attached a codepen to demonstrate the problem too - resize the browser so that the list items fall to the line below: https://codepen.io/Macast/pen/jZrObb
HTML:
<nav>
<label for="drop" class="toggle">Menu</label>
<input type="checkbox" id="drop" />
<ul class="menu">
<li>Home</li>
<li>About Us</li>
<li>
<!-- First Tier Dropdown -->
<label for="drop-1" class="toggle">Attractions & Entertainments +</label>
Attractions & Entertainments
<input type="checkbox" id="drop-1" />
<ul>
<li>Example</li>
<li>Example</li>
<li>Example</li>
</ul>
</li>
<li>
<!-- First Tier Dropdown -->
<label for="drop-1" class="toggle">Conference, Meetings & Events +</label>
Conference, Meetings & Events
<input type="checkbox" id="drop-1" />
<ul>
<li>Example</li>
<li>Example</li>
<li>Example</li>
</ul>
</li>
<li>
<!-- First Tier Dropdown -->
<label for="drop-1" class="toggle">Accommodation +</label>
Accomodation
<input type="checkbox" id="drop-1" />
<ul>
<li>Example</li>
<li>Example</li>
<li>Example</li>
</ul>
</li>
<li>Supplier Directory</li>
<li>Travel Trade</li>
<li>Contact Us</li>
<li>Additional Support</li>
</ul>
</nav>
CSS:
html,
body {
height: 100%;
width: 100%;
font-family: "Helvetica Neue Bold", "Arial Bold", sans-serif;
margin: 0;
}
/* Navigation Bar */
.toggle,
[id^="drop"] {
display: none;
}
/* Giving a background-color to the nav container */
nav {
margin: 0;
padding: 0;
background-color: #3c3c3b;
}
/* Since we'll have the "ul li" "float: left", we need to add a clear after the container */
nav: after {
content: "";
display: table;
clear: both;
}
/* Removing padding, margin and "list-style" from the "ul", and adding "position: relative" */
nav ul {
text-align: center;
padding: 0;
margin: 0;
list-style: none;
position: relative;
}
/* Positioning the navigation items inline */
nav ul li {
margin: 0px;
display: inline-block;
background-color: #3c3c3b;
text-align: center;
position: relative;
z-index: 50; /* Link items will stay above all other content, e.g. Maps */
}
/* Styling the links */
nav a {
display: block;
padding: 14px 20px;
color: #ffffff;
font-size: 12pt;
text-decoration: none;
text-align: center;
}
/* Background colour change on hover */
nav a:hover {
background-color: #000000;
}
nav ul li ul li:hover {
background: #000000;
}
/* Hide dropdowns by default and giving it a position of absolute */
nav ul ul {
display: none;
position: absolute;
/* Had to be the same number as the "line-height" of "nav a" */
/*top: 60px;*/
left: 0;
right: 0;
}
/* Display dropdowns on hover */
nav ul li:hover > ul,
nav ul li:focus > ul {
display: inherit;
}
/* First Tier Dropdowns */
nav ul ul li {
float: none;
display: list-item;
position: relative;
text-align: center;
z-index: 100;
}
/* Second, Third and more Tier Dropdowns */
/* We move the 2nd and 3rd etc tier dropdowns to the left by the amount of the width of the first tier */
nav ul ul ul li {
position: relative;
/*top: -60px;*/
/* Has to be the same number as the "width" of "nav ul ul li" */
left: 200px;
}
/* Change ' +' in order to change the dropdown symbol */
li > a:after {
content: " +";
}
li > a:only-child:after {
content: "";
}

Answer 1

In the css, removed the z-index:50; line, and it worked.
nav ul li {
margin: 0px;
display: inline-block;
background-color: #3c3c3b;
text-align: center;
position: relative;
z-index: 50; /* <---------------THIS LINE HERE, REMOVED */
}
Here is the snippet:
html,
body {
height: 100%;
width: 100%;
font-family: "Helvetica Neue Bold", "Arial Bold", sans-serif;
margin: 0;
}
/* Navigation Bar */
.toggle,
[id^="drop"] {
display: none;
}
/* Giving a background-color to the nav container */
nav {
margin: 0;
padding: 0;
background-color: #3c3c3b;
}
/* Since we'll have the "ul li" "float: left", we need to add a clear after the container */
nav: after {
content: "";
display: table;
clear: both;
}
/* Removing padding, margin and "list-style" from the "ul", and adding "position: relative" */
nav ul {
text-align: center;
padding: 0;
margin: 0;
list-style: none;
position: relative;
}
/* Positioning the navigation items inline */
nav ul li {
margin: 0px;
display: inline-block;
background-color: #3c3c3b;
text-align: center;
position: relative;
}
/* Styling the links */
nav a {
display: block;
padding: 14px 20px;
color: #ffffff;
font-size: 12pt;
text-decoration: none;
text-align: center;
}
/* Background colour change on hover */
nav a:hover {
background-color: #000000;
}
nav ul li ul li:hover {
background: #000000;
}
/* Hide dropdowns by default and giving it a position of absolute */
nav ul ul {
display: none;
position: absolute;
/* Had to be the same number as the "line-height" of "nav a" */
/*top: 60px;*/
left: 0;
right: 0;
}
/* Display dropdowns on hover */
nav ul li:hover > ul,
nav ul li:focus > ul {
display: inherit;
}
/* First Tier Dropdowns */
nav ul ul li {
float: none;
display: list-item;
position: relative;
text-align: center;
z-index: 100;
}
/* Second, Third and more Tier Dropdowns */
/* We move the 2nd and 3rd etc tier dropdowns to the left by the amount of the width of the first tier */
nav ul ul ul li {
position: relative;
/*top: -60px;*/
/* Has to be the same number as the "width" of "nav ul ul li" */
left: 200px;
}
/* Change ' +' in order to change the dropdown symbol */
li > a:after {
content: " +";
}
li > a:only-child:after {
content: "";
}
<nav>
<label for="drop" class="toggle">Menu</label>
<input type="checkbox" id="drop" />
<ul class="menu">
<li>Home</li>
<li>About Us</li>
<li>
<!-- First Tier Dropdown -->
<label for="drop-1" class="toggle">Attractions & Entertainments +</label>
Attractions & Entertainments
<input type="checkbox" id="drop-1" />
<ul>
<li>Example</li>
<li>Example</li>
<li>Example</li>
</ul>
</li>
<li>
<!-- First Tier Dropdown -->
<label for="drop-1" class="toggle">Conference, Meetings & Events +</label>
Conference, Meetings & Events
<input type="checkbox" id="drop-1" />
<ul>
<li>Example</li>
<li>Example</li>
<li>Example</li>
</ul>
</li>
<li>
<!-- First Tier Dropdown -->
<label for="drop-1" class="toggle">Accommodation +</label>
Accomodation
<input type="checkbox" id="drop-1" />
<ul>
<li>Example</li>
<li>Example</li>
<li>Example</li>
</ul>
</li>
<li>Supplier Directory</li>
<li>Travel Trade</li>
<li>Contact Us</li>
<li>Additional Support</li>
</ul>
</nav>