html – How do I change my code just to add another submenu level to my CSS, drop down menu

Hello and thanks in advance,

I have some CSS that shows 3 levels of dropdown but I also need to work for 4th level. I tried copying the third level code and just adding an extra li or ul but it doesn’t work. It just needs to be CSS without jquery code. The last level does not align with the left side of the parent tire, but misrepresents with the parent.

`

<!DOCTYPE html 
<head>
<meta http-equiv="Content-Type" content="text/html;charset=UTF-8">

<style type="text/css"> 

/* Menu General Styles */
.menuBackground {
                background-color: #164149; /* Dark Green */
                color: White;
                float: left:         /* The float property specifies how an element should float, left, right, none, inherit (from parent)*/
                text-align: left;    /* To align text left*/
                white-space: nowrap; /* Sequences of whitespace will collapse into a single whitespace. Text will never wrap to the next line. The text continues on the same line until a <br> tag is encountered */
                margin-left: 1px;    /* This moves the menu bar to left align with the banner because of the Context Editor container misaligning it */
                margin-top: 12px;    /* This moves the menu bar up or down from the banner */
}

/* Adjust the text position in the drop-down menus to vertically align text with their icons */
.nav-text {
                display: inline-block;
                vertical-align: -2px;
}

/* Create a right facing black arrow for the year ranges in the files menu */
.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; /* align and centre the arrow with the text */
}

/* Transform the arrow to the right orientation */
.right {
  transform: rotate(90deg);
  -webkit-transform: rotate(90deg);
}

.dropDownMenu,
.dropDownMenu ul {
                list-style: none;    /* Lists have default markers/bullets. To remove these, add list-style: none; to <ul> or <ol>: */
                margin: 0px;            /* Lists have a default margin. To remove this, add margin: 0; to <ul> or <ol>: */
                padding: 0px;        /* Lists have a default padding. To remove this, add padding: 0; to <ul> or <ol>: */
                font-weight: Normal;
                font-family: Calibri;
                font-size: 14px;
}


/* This is the menu list at the top level */
.dropDownMenu li {
                background-color: #164149; /* Dark Green */
                color: White;                    
                position: relative; /*HTML elements are positioned static by default. Static positioned elements are not affected 
                                   by the top, bottom, left, and right properties. An element with position: relative; is positioned relative to its normal position. 
                                                    Setting the top, right, bottom, and left properties of a relatively-positioned element will cause it to be 
                                                    adjusted away from its normal position. Other content will not be adjusted to fit into any gap left by the element.*/
}

.dropDownMenu a {
                padding: 12px 20px;
                display: block;
                text-decoration: none;
                background-color: #164149; /* Dark Green */
                color: White;
                font-family: Calibri;
                font-weight: Normal;
                font-size: 14px;
}

.dropDownMenu a:hover {
                background-color: white; /* White with black font  - when top menu hovered over */
                color: black;
}


/* Level 1 Drop Down Menu */
.dropDownMenu > li {
                display: inline-block;
                vertical-align: top;
                margin-left: -4px; /* solve the 4 pixels spacing between list-items */
                background-color: #164149; /* Dark Green */
                color: White;
}

.dropDownMenu > li:first-child {
                margin-left: 0;
}

.dropDownMenu > li > a {
                background-color: #164149; /* Dark Green */
                color: White;
}
.dropDownMenu > li > a:hover {
                /*background-color: #164149;  Dark Green */
                /* color: White; */
}



/* Level 2 */
.dropDownMenu > li > ul {
                text-align: left;
                width: auto; /* change auto value with 200px if you want a bigger menu */
                display: none;
                position: absolute;
                top: 100%;
                left: 0;
                z-index: 9999999; /* if you have YouTube iframes, is good to have a bigger z-index so the video can appear above the video */
                font-weight: normal; 
                font-family: Calibri;
                font-size: 14px;
}

.dropDownMenu > li:hover > ul {
                display: block;
                background-color: #bddbdb;  /* Light Blue - when menu droped down */
                color: Black;
}


.dropDownMenu ul li a {
                background-color: #bddbdb; /*Light Blue - when menu droped down */
                color: Black;
                padding: 10px 20px;
                font-weight: normal; 
                font-family: Calibri;
                font-size: 14px;
}

.dropDownMenu ul li a:hover {
                background-color: #164149; /* Dark Green */
                color: White;
}

/* Make arrow white when this 2nd level menu is hovered */
.dropDownMenu ul li a:hover .arrow{
                border-bottom: 4px solid white;
}

.dropDownMenu > li:hover > a {
    background-color: white;  /* White with black font for top menu button - when child menus hovered over */
    color: Black;
}


/* Level 3 */
.dropDownMenu > li > ul > li > ul {
                text-align: left;
                display: none;
                background-color: #bddbdb; /* Light Blue - when menu droped down */
                color: Black;
                position: absolute;
                left: 100%;
                top: 0;
                z-index: 9999999;
                font-weight: normal; 
                font-family: Calibri;
                font-size: 14px;
}

.dropDownMenu > li > ul > li a {
                padding: 10px 20px;
}

.dropDownMenu > li > ul > li:hover > ul {
                display: block;
                background-color: #164149; /* Dark Green */
                color: White;
}

.dropDownMenu > li > ul > li:hover > a {
    background-color: #164149;  /* Sustain dark green with white font for the second level menu selected - when child menus hovered over */
    color: White;
}

/* Sustain WHITE arrow on 2nd level menu when 3nd level menu is hovered */
.dropDownMenu > li > ul > li:hover > a .arrow{
                border-bottom: 4px solid white;
}


/* Level 4 */
.dropDownMenu  > li > ul > li > ul > li > ul{
                text-align: left;
                display: none;
                background-color: #bddbdb; /* Light Blue - when menu droped down */
                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; /* Dark Green */
                color: White;
}

.dropDownMenu  > li > ul > li > ul > li:hover > a {
    background-color: #164149;  /* Sustain dark green with white font for the second level menu selected - when child menus hovered over */
    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">&nbsp;&nbsp;2021&nbsp;&nbsp;&nbsp;<i class="arrow right"></i>&nbsp;2023</span></a>
                    <ul>
                        <li><a href="">2021</a></li>
                            <ul>
                                <li><a href="">2021 Part A</a></li>
                                <li><a href="">2021 Part B</a></li>
                            </ul>
                        <li><a href="">2022</a></li>
                        <li><a href="">2023</a></li>
                    </ul>
                </li>
                <li><a href="#">&nbsp;&nbsp;2018&nbsp;&nbsp;&nbsp;<i class="arrow right"></i>&nbsp;2020</span></a>
                    <ul>
                        <li><a href="">2018</a></li>
                        <li><a href="">2019</a></li>
                        <li><a href="">2020</a></li>
                    </ul>
                </li>
                <li><a href="#">&nbsp;&nbsp;2015&nbsp;&nbsp;&nbsp;<i class="arrow right"></i>&nbsp;2017</span></a>
                    <ul>
                        <li><a href="">2015</a></li>
                            <ul>
                                <li><a href="">2015 Part A</a></li>
                                <li><a href="">2015 Part B</a></li>
                                <li><a href="">2015 Part C</a></li>
                            </ul>
                        <li><a href="">2016</a></li>
                        <li><a href="">2017</a></li>
                    </ul>
                </li>
            </ul>
        </li>                                        
    </ul>
</div>

</body>

</html>

3

Write a Comment

Your email address will not be published. Required fields are marked *