Hello and thank you for your help,
I currently have some CSS code that is working well for 3 levels of dropdown menus, but I am now in need of it to also support a 4th level. When I try to add the extra level by copying the 3rd level code and making adjustments, it does not work as expected. It's important that this is achieved using only CSS and no jQuery code. The main issue I'm facing is that the 4th tier does not align correctly with its parent, appearing inline instead of beneath.
`
<!DOCTYPE html
<head>
<meta http-equiv="Content-Type" content="text/html;charset=UTF-8">
<style type="text/css">
/* Styles for the Menu */
.menuBackground {
background-color: #164149; /* Dark Green */
color: White;
float: left:
text-align: left;
white-space: nowrap;
margin-left: 1px;
margin-top: 12px;
}
.nav-text {
display: inline-block;
vertical-align: -2px;
}
.arrow {
width: 0;
height: 0;
border-left: 4px solid transparent;
border-right: 4px solid transparent;
border-bottom: 4px solid black;
display: inline-block;
padding-bottom: 5px;
}
.right {
transform: rotate(90deg);
-webkit-transform: rotate(90deg);
}
.dropDownMenu,
.dropDownMenu ul {
list-style: none;
margin: 0px;
padding: 0px;
font-weight: Normal;
font-family: Calibri;
font-size: 14px;
}
.dropDownMenu li {
background-color: #164149; /* Dark Green */
color: White;
position: relative;
}
.dropDownMenu a {
padding: 12px 20px;
display: block;
text-decoration: none;
background-color: #164149;
color: White;
font-family: Calibri;
font-weight: Normal;
font-size: 14px;
}
.dropDownMenu a:hover {
background-color: white;
color: black;
}
.dropDownMenu > li {
display: inline-block;
vertical-align: top;
margin-left: -4px;
background-color: #164149; /* Dark Green */
color: White;
}
...
/* Level 4 */
.dropDownMenu > li > ul > li > ul > li > ul{
text-align: left;
display: none;
background-color: #bddbdb;
color: Black;
position: absolute;
left: 100%;
top: 0;
z-index: 9999999;
font-weight: normal;
font-family: Calibri;
font-size: 14px;
}
.dropDownMenu >li > ul > li > ul > li a {
padding: 10px 20px;
}
.dropDownMenu > li > ul > li > ul > li:hover > ul{
display: block;
background-color: #164149;
color: White;
}
.dropDownMenu > li > ul > li > ul > li:hover > a {
background-color: #164149;
color: White;
}
/* Sustain WHITE arrow on 2nd level menu when 4th level menu is hovered */
.dropDownMenu > li > ul > li > ul > li:hover > a .arrow{
border-bottom: 4px solid white;
}
</Style>
</head>
<body>
<div class="menuBackground">
<ul class="dropDownMenu">
<li><a>Home</a>
<ul>
<li><a href="">Home Page 1</a></li>
<li><a href="">Home Page 2</a></li>
</ul>
</li>
<li><a>Files</a>
<ul>
<li><a href="#"><span class="nav-text"> 2021 <i class="arrow right"></i> 2023</span></a>
...
`