Overlay Menu help required. (Creating Submenus) Options

[Midwinter]

Hi there.

New user, so thank you in advance for any assistance that you may be able to give me.

I am in the process of creating a website. I've used (copy/pasted) some code for an overlay menu - which works perfectly. However, I would like to add a submenu to some of the categories. I've checked on the W3C site and performed a loose search on how to do this, but I'm unable to find any hints/tips that tell you how to add submenus to an overlay - only a normal navigation menu.

The site is theadventurers.agency

and here's the code before I customised it.

...THE HTML...

CODE

<!-- Menu Overlay -->
<div id="taaNav" class="overlay">

    <!-- Close Button -->
    <a href="java script:void(0)" class="closebtn" onclick="closeNav() "><u>Close Menu</u></a>

    <!-- Overlay Menu Content -->
    <div class="overlay-content">
        <a href="index.html" class="glass">Home</a>
        <a href="https://theadventurers.agency/content/biographies/biographies.html" class="glass">Biographies</a>
        <a href="https://theadventurers.agency/content/reference/reference.html" class="glass" target="_blank">Reference Section</a>
        <a href="#" class="glass" target="_blank">The Journals</a>
        <a href="#" class="glass">Submissions</a>
        <a href="#" class="glass" target="_blank">The Midwinter Mapworks</a>
        <a href="#" class="glass" target="_blank">Forums</a>
        <a href="https://theadventurers.agency/shop/index.php" class="glass" target="_blank">Merchandising</a>
        <a href="https://theadventurers.agency/content/faqs/faqs.html" class="glass">FAQ's</a>
        <a href="#" class="glass">Subscribe & Donate</a>
        <a href="#" class="glass" target="_blank">Artist Galleries & Links</a>
        <a href="#" class="glass">Get In Touch</a>
    </div>

</div>

<!-- The Menu Button -->
<span onclick="openNav() "><h1><u>MENU</u></h1></span>
<br>

...AND THE CSS...

CODE

/* OVERLAY MENU STYLING */
/* -------------------- */

/* The Overlay */
.overlay {
    /* Overlay Height */
    height: 0%;
    /* Overlay Width */
    width: 100%;
    /* Overlay Position */
    position: fixed;
    /* Z Index Keeps Overlay On Top */
    z-index: 1;
    top: 0;
    left: 0;
    /* Overlay Fallback Color */
    background-color: rgb(0,0,0);
    /* Overlay Color With Transparency/Opacity */
    background-color: rgba(0,0,0, 0.9);
    /* Disables Horizontal Scroll (Original Hidden - Changed To Auto)*/
    overflow-y: auto;
    /* Transition Effect Delay */
    transition: 0.5s;
}
/* Overlay Content Positioning */
.overlay-content {
    position: relative;
    /* Position Content 25% From The Top Of The Screen */
    top: 25%;
    /* Menu Width 100% */
    width: 100%;
    /* Center The Text */
    text-align: center;
    /* Add A 30px Top Margin To Avoid Conflict With The Close
    Button On Smaller Screens */
    margin-top: 30px;
}
/* Overlay Navigation Links */
.overlay a {
    padding: 8px;
    text-decoration: none;
    font-size: 36px;
    color: cyan;
    /* Display Block Instead Of Inline */
    display: block;
    /* Transition Effect On Hover */
    transition: 0.3s;
}
/* Overlay Color Change On Hover */
.overlay a:hover, .overlay a:focus {
    color:purple
}
/* Position Close Button In Top Right Corner */
.overlay .closebtn {
    position: absolute;
    top: 20px;
    right: 45px;
    font-size: 30px;
}
/* When The Height Of The Screen Is Less Than 450px,
Change The Font Size Of The Links And Reposition The Close Button
So That They Don't Overlap */
@media screen and (max-height: 450px) {
    .overlay {overflow-y: auto;}
    .overlay a {font-size: 20px}
    .overlay .closebtn {
    font-size: 40px;
    top: 15px;
    right: 35px;
    }
}

        ul {
            list-style-type: none;
            margin: 0;
            padding: 0;
        }

        li a {
            display: block;
            width: 200px;
            background-color: #3a3b3c;
            text-align: center;
        }

/* BUTTON STYLING */
/* -------------- */

        .glass{
    position: relative;
    display: inline-block;
    padding: 15px 25px;
    background-color: black;
    background-image: linear-gradient(#3a3b3c,black);

    text-decoration: none;
    color: cyan;
    font-size: 25px;
    font-family: "Fondamento-Regular", 'Times New Roman', Times, serif;
    font-weight: 100;
    border-radius: 3px;
    box-shadow: 0px 1px 4px -2px #333;
    text-shadow: 0px -1px #333;
}

.glass:after{
    content: '';
    position: absolute;
    top: 2px;
    left: 2px;
    width: calc(100% - 4px);
    height: 50%;
    background: linear-gradient(rgba(255,255,255,0.8)), (rgba(255,255,255,0.2));
}

.glass:hover{
    background: linear-gradient(rgb(74, 80, 167),rgb(44, 3, 110));
}
/* Horizontal Line With Rounded Border */
.rounded {
    border-top: 5px solid #d4af37;
    border-radius: 5px;
}

My knowledge of html and css was once "quite" good, but as with everything, without constant practice, one's memory wavers, so I've forgotten most of what I've ever learned, so please bear this in mind when assisting.

Once again, thank you in advance.

Best Wishes,

Chris.

[Midwinter]

Jason - in the htaccess file, line 31, do I need to uncomment lines 32 to 36 or just the one regarding https if I have forced ssl on the website?

Not sure if this part is relevant but I don't have www at the beginning of the URL.

Finally, once I've made my changes, if I repack the file and include a text file that lists all the changes that I've made, would you have time to take a quick look, just to make sure that I've done it correcly, please?

By the way...

What's the separator that you've used for the file names, please? My screen's too small for me to see - but it looks like a small square?