CSS Z-index, drop down arrow floating above main menu - css

Question

I have two separate collapsible menu scripts I've implemented onto my website. With the second menu, a collapsible information display that has a arrow that rotates when the information menu is open, the arrow itself floats above everything else, even when the main drop down menu covers it. I have messed with the z-index of both items but can not figure out how to fix it. I have attached the relative code as well as photos of the problem area.
THIS IS MY CSS FOR MY MAIN HAMBURGER MENU AND THE BUTTON IN THE TOP LEFT CORNER
/* [ON BIG SCREENS] */
/* (A) WRAPPER */
#hamnav {
width: 100%;
background: #333333;
/* Optional */
top: 0;
position: fixed;
border-bottom: 1px solid #999999;
}
/* (B) HORIZONTAL MENU ITEMS */
#hamitems { display: flex;
z-index:100;
}
#hamitems a {
flex-grow: 1;
flex-basis: 0;
padding: 5px;
color: #D5DBDB;
text-decoration: none;
text-align: center;
font-size: 12px;
line-height: 20px;
border-left: 1px solid #999999;
border-right: 1px solid #999999;
border-bottom: 1px solid #666666;
font-family; Verdana;
z-index:100;
}
#hamitems a:hover {
background: #999999;
color: #D5DBDB;
}
/* (C) HIDE HAMBURGER */
#hamnav label, #hamburger { display: none; }
/* [ON SMALL SCREENS] */
#media screen and (max-width: 768px){
/* (A) BREAK INTO VERTICAL MENU */
#hamitems a {
box-sizing: border-box;
display: block;
width: 100%;
border-top: 1px solid #999999;
font-family: Verdana;
z-index:100;
}
/* (B) SHOW HAMBURGER ICON */
#hamnav label {
display: inline-block;
color: #FFFFFF;
background: #333333;
font-style: normal;
font-size: 2.0em;
padding: 5px;
padding-left: 12px;
}
/* (C) TOGGLE SHOW/HIDE MENU */
#hamitems { display: none; }
#hamnav input:checked ~ #hamitems { display: block; }
}
/* [DOES NOT MATTER] */
html, body {
padding: 0;
margin: 0;
color: #FFFFFF;
background-color: #000000;
bgcolor: #000000;
}
THIS IS MY CSS FOR THE COLLAPSIBLE INFORMATION MENU WHICH DISPLAYS THE BULLET ABOVE THE FLOATING MAIN MENU WHEN I DROP IT. NOTHING ELSE FLOATS ABOVE THE MAIN MENUE.
input[type='checkbox'] {
display: none;
}
.wrap-collabsible {
margin: 10px 5px 20px 5px; }
.lbl-toggle {
display: block;
font-weight: bold;
font-family: monospace;
font-size: 1.2rem;
text-transform: uppercase;
text-align: center;
padding: 1rem;
color: #DDD;
background: #000000;
cursor: pointer;
border-radius: 7px;
transition:
all 0.25s ease-out;
}
.lbl-toggle:hover {
color: #FFF;
}
.lbl-toggle::before {
content: ' ';
display: inline-block;
border-top: 5px solid transparent;
border-bottom: 5px solid transparent;
border-left: 5px solid currentColor;
vertical-align: middle;
margin-right: .7rem;
transform: translateY(-2px);
transition: transform .2s ease-out;
}
.toggle:checked+.lbl-toggle::before {
transform: rotate(90deg) translateX(-3px);
}
.collapsible-content {
max-height: 0px;
overflow: hidden;
transition: max-height .25s ease-in-out;
}
.toggle:checked + .lbl-toggle + .collapsible-content {
max-height: 5000px;
}
.toggle:checked+.lbl-toggle {
border-bottom-right-radius: 0;
border-bottom-left-radius: 0;
}
.collapsible-content .content-inner {
background: #000000;
border-bottom: 1px solid #FFFFFF;
border-bottom-left-radius: 7px;
border-bottom-right-radius: 7px;
padding: .5rem 1rem;
}
.collapsible-content p {
margin-bottom: 0;
font-size: 15px;
font-family: Verdana;
margin-left: auto;
margin-right: auto;
text-align: justify;
line-height: 25px;
}
THIS IS THE MARKUP AS REQUESTED, THIS PRINTS THE COLLAPSIBLE INFORMATION MENU WITH THE TROUBLESOME BULLET POINT (CHECKBOX)
if (isset($v) && $v==1){
echo "<div class='wrap-collabsible'>";
echo "<input id='collapsible' class='toggle' type='checkbox'>";
echo "<label for='collapsible' class='lbl-toggle'>Alphabetical name jump</label>";
echo "<div class='collapsible-content'>";
echo "<div class='content-inner'>";
echo "<p>";
$sql = "SELECT user_id, username FROM user_reg ORDER BY username";
$result = mysqli_query($conn, $sql);
while($row = mysqli_fetch_array($result, MYSQLI_NUM))
{
$id=$row[0];
$username=$row[1];
echo "<a href='#$id' class=block>$username</a>";
echo " ";
}
echo "</p>";
echo "</div>";
echo "</div>";
echo "</div>";
} // END IF V1
THIS IS THE HAMBURGER MENU WHICH IS ALLOWING THE TROUBLESOME BULLETPOINT TO BE DISPLAYED ABOVE IT
<meta name="viewport" content="width=device-width, initial-scale=1.0">
</head>
<body bgcolor="#000000">
<!-- (A) MENU WRAPPER -->
<nav id="hamnav">
<!-- (B) THE HAMBURGER -->
<label for="hamburger">☰</label>
<input type="checkbox" id="hamburger"/>
<!-- (C) MENU ITEMS -->
<div id="hamitems">
<a href=admin_panel.php?v=8>Unoff, Verif & Photo <?php echo "($total8)"; ?></a>
<a href=admin_panel.php>Offic, Verif <?php echo "($total)"; ?></a>
<a href=admin_panel.php?v=7>Unnoff, Verif, No Photo <?php echo "($total7)"; ?></a>
<a href=admin_panel.php?v=2>UnVerif <?php echo "($total2)"; ?></a>
<a href=admin_panel.php?v=1>Active <?php echo "($total1)"; ?></a>
<a href=admin_panel.php?v=3>Blocked <?php echo "($total3)"; ?></a>
<a href=admin_panel.php?v=4>Inactive <?php echo "($total4)"; ?></a>
<a href=admin_panel.php?v=5>Test Account</a>
<a href=admin_panel_orders.php>Orders <?php echo "($total6 new)"; ?></a>
<a href=admin_email_log.php?v=7>Remind Log</a>
<a href=admin_panel_polls.php>Poll #1 Log <?php echo "($total_poll votes)"; ?></a>
<a href=admin_messages.php>Contact Mess <?php echo "($total_mess new)"; ?></a>
<a href=admin_refer_friend_log.php>Refer FRND Log <?php echo "($total_log)"; ?></a>
<a href=admin-edit-store-items.php>Products <?php echo "($total_products out of stock)"; ?></a>
<a href=admin-create-coupon.php>Coupons <?php echo "($total_coup left)"; ?></a>
</div>
</nav>

Answer 1

I solved this issue using style="position: relative; z-index: 0;" for the elements that must appear below other elements. The elements that must appear on top should have z-index: 1;
For details check out the 3rd point in this article!