Single navigation with collapsible menu

<div style="width:100%; max-width: 600px; display: inline-block; margin: 0 auto; font-family: Arial, Helvetica, sans-serif; text-transform: uppercase; font-weight: 700; font-size: 80%; letter-spacing: 0.1em;"> <!--MAIN LINKS--> <div style="width: 100%; display: flex; flex-wrap: wrap; text-align: center;"> <div style="background: #EDF2EE; flex: 12em; margin: 0.375em;"> <a href="https://pacificator.dreamwidth.org/3062.html" style="color: #040509;text-decoration: none; display: block; padding: 1em;">OPEN </a> </div> <div style="background: #ABB5B2; flex: 12em; margin: 0.375em;"> <a href="https://pacificator.dreamwidth.org/312.html" style="color: #040509;text-decoration: none; display: block; padding: 1em;">PERMISSIONS </a> </div> </div> <!--END OF MAIN LINKS--> <!--MAIN IMAGE--> <div style="height: 300px; display: flex; background: url('https://i.pinimg.com/564x/c6/eb/e7/c6ebe7a83d71e338f3dbd91e841b1d4b.jpg')center; background-size: cover; margin: 0.375em;"> </div> <!--END OF MAIN IMAGE--> <!--SUBMENUS--> <div style="display: flex; width: 100%; flex-wrap: nowrap; flex-direction: column;"> <!--SUBMENU 1--> <details style="background: #EEF3EF; color: #040509; margin: 0.375em;"> <summary style="text-align: center; list-style: none; padding: 1em; cursor: pointer;">Singillatim </summary> <div style="width: 95%; margin: auto; display: flex; flex-wrap: wrap; text-align: center;"> <div style="background: #FFF; flex-grow: 1; margin: 0.375em;"> <a href="https://pacificator.dreamwidth.org/1578.html" style="color: #040509;text-decoration: none; display: block; padding: 1em;">APPLICATION </a> </div> <div style="background: #ABB5B2; flex-grow: 1; margin: 0.375em;"> <a href="https://pacificator.dreamwidth.org/3360.html" style="color: #040509;text-decoration: none; display: block; padding: 1em;">INVENTORY </a> </div> <div style="background: #D9DBD6; flex-grow: 1; margin: 0.375em;"> <a href="https://pacificator.dreamwidth.org/2235.html" style="color: #040509;text-decoration: none; display: block; padding: 1em;">LODGING </a> </div> <div style="background: #C4CDCE; flex-grow: 1; margin: 0.375em;"> <a href="" style="color: #040509;text-decoration: none; display: block; padding: 1em;">ACTIVITY </a> </div> <div style="background: #FFF; flex-grow: 1; margin: 0.375em;"> <a href="" style="color: #040509;text-decoration: none; display: block; padding: 1em;">BULLETIN </a> </div> <div style="background: #ABB5B2; flex-grow: 1; margin: 0.375em;"> <a href="https://pacificator.dreamwidth.org/3145.html" style="color: #040509;text-decoration: none; display: block; padding: 1em;">THREAD TRACKER </a> </div> <div style="background: #D9DBD6; flex-grow: 1; margin: 0.375em;"> <a href="" style="color: #040509;text-decoration: none; display: block; padding: 1em;">PAGE 7 </a> </div> <div style="background: #C4CDCE; flex-grow: 1; margin: 0.375em;"> <a href="" style="color: #040509;text-decoration: none; display: block; padding: 1em;">PAGE 8 </a> </div> <div style="background: #FFF; flex-grow: 1; margin: 0.375em;"> <a href="" style="color: #040509;text-decoration: none; display: block; padding: 1em;">PAGE 9 </a> </div> <div style="background: #ABB5B2; flex-grow: 1; margin: 0.375em;"> <a href="" style="color: #040509;text-decoration: none; display: block; padding: 1em;">PAGE 10 </a> </div> <div style="background: #D9DBD6; flex-grow: 1; margin: 0.375em;"> <a href="" style="color: #040509;text-decoration: none; display: block; padding: 1em;">PAGE 11 </a> </div> <div style="background: #C4CDCE; flex-grow: 1; margin: 0.375em;"> <a href="" style="color: #040509;text-decoration: none; display: block; padding: 1em;">PAGE 12 </a> </div> </div> </details> <!--END OF SUBMENU 1--> </div> <!-- END OF SUBMENUS--> <!--FOOTER IMAGE--> <div style="height: 20px; display: flex; background: url('https://i.pinimg.com/564x/c6/eb/e7/c6ebe7a83d71e338f3dbd91e841b1d4b.jpg')bottom; background-size: cover; margin: 0.375em;"> </div> <!--END OF FOOTER IMAGE--> <!--CREDIT DO NOT REMOVE--> <div style="margin: 0.375em; text-align: right; font-size: 0.75em;"><a href="https://teacodes.dreamwidth.org/" style="opacity: 0.75; text-decoration: none;">code</a> </div> <!--END OF CREDIT DO NOT REMOVE--> </div>

Two navigations, one linking to the other

Landing page
<div style="width:100%; max-width: 600px; display: inline-block; margin: 0 auto; font-family: Arial, Helvetica, sans-serif; text-transform: uppercase; font-weight: 700; font-size: 80%; letter-spacing: 0.1em;"> <!--MAIN LINKS--> <div style="width: 100%; display: flex; flex-wrap: wrap; text-align: center;"> <div style="background: #EDF2EE; flex: 12em; margin: 0.375em;"> <a href="https://pacificator.dreamwidth.org/3062.html" style="color: #040509;text-decoration: none; display: block; padding: 1em;">OPEN </a> </div> <div style="background: #ABB5B2; flex: 12em; margin: 0.375em;"> <a href="https://pacificator.dreamwidth.org/312.html" style="color: #040509;text-decoration: none; display: block; padding: 1em;">PERMISSIONS </a> </div> </div> <!--END OF MAIN LINKS--> <!--MAIN IMAGE--> <div style="height: 300px; display: flex; background: url('https://i.pinimg.com/564x/c6/eb/e7/c6ebe7a83d71e338f3dbd91e841b1d4b.jpg')center; background-size: cover; margin: 0.375em;"> </div> <!--END OF MAIN IMAGE--> <!--SUBMENU 1 LINK--> <div style="width: 100%; display: flex; flex-wrap: wrap; text-align: center;"> <div style="background: #EEF3EF; flex-grow: 1; margin: 0.375em;"> <a href="LINK TO SUBMENU GOES HERE" style="color: #040509;text-decoration: none; display: block; padding: 1em;">SINGILLATIM </a> </div> </div> <!--END OF SUBMENU 1 LINK--> <!--FOOTER IMAGE--> <div style="height: 20px; display: flex; background: url('https://i.pinimg.com/564x/c6/eb/e7/c6ebe7a83d71e338f3dbd91e841b1d4b.jpg')bottom; background-size: cover; margin: 0.375em;"> </div> <!--END OF FOOTER IMAGE--> <!--CREDIT DO NOT REMOVE--> <div style="margin: 0.375em; text-align: right; font-size: 0.75em;"><a href="https://teacodes.dreamwidth.org/" style="opacity: 0.75; text-decoration: none;">code</a> </div> <!--END OF CREDIT DO NOT REMOVE--> </div>

Submenu page
<div style="width:100%; max-width: 600px; display: inline-block; margin: 0 auto; font-family: Arial, Helvetica, sans-serif; text-transform: uppercase; font-weight: 700; font-size: 80%; letter-spacing: 0.1em;"> <!--SUBMENU TITLE--> <div style="width: 100%; display: flex; flex-wrap: wrap; text-align: center;"> <div style="flex: 12em; margin: 0.375em;"> <span style="text-decoration: none; display: block; padding: 1em;">SINGILLATIM </span> </div> </div> <!--END OF SUBMENU TITLE--> <!--MAIN IMAGE--> <div style="height: 300px; display: flex; background: url('https://i.pinimg.com/564x/c6/eb/e7/c6ebe7a83d71e338f3dbd91e841b1d4b.jpg')center; background-size: cover; margin: 0.375em;"> </div> <!--END OF MAIN IMAGE--> <!--LINKS--> <div style="width: 100%; display: flex; flex-wrap: wrap; text-align: center;"> <div style="background: #EEF3EF; flex-grow: 1; margin: 0.375em;"> <a href="https://pacificator.dreamwidth.org/1578.html" style="color: #040509;text-decoration: none; display: block; padding: 1em;">APPLICATION </a> </div> <div style="background: #ABB5B2; flex-grow: 1; margin: 0.375em;"> <a href="https://pacificator.dreamwidth.org/3360.html" style="color: #040509;text-decoration: none; display: block; padding: 1em;">INVENTORY </a> </div> <div style="background: #D9DBD6; flex-grow: 1; margin: 0.375em;"> <a href="https://pacificator.dreamwidth.org/2235.html" style="color: #040509;text-decoration: none; display: block; padding: 1em;">LODGING </a> </div> <div style="background: #C4CDCE; flex-grow: 1; margin: 0.375em;"> <a href="" style="color: #040509;text-decoration: none; display: block; padding: 1em;">ACTIVITY </a> </div> <div style="background: #EEF3EF; flex-grow: 1; margin: 0.375em;"> <a href="" style="color: #040509;text-decoration: none; display: block; padding: 1em;">BULLETIN </a> </div> <div style="background: #ABB5B2; flex-grow: 1; margin: 0.375em;"> <a href="https://pacificator.dreamwidth.org/3145.html" style="color: #040509;text-decoration: none; display: block; padding: 1em;">THREAD TRACKER </a> </div> <div style="background: #D9DBD6; flex-grow: 1; margin: 0.375em;"> <a href="" style="color: #040509;text-decoration: none; display: block; padding: 1em;">PAGE 7 </a> </div> <div style="background: #C4CDCE; flex-grow: 1; margin: 0.375em;"> <a href="" style="color: #040509;text-decoration: none; display: block; padding: 1em;">PAGE 8 </a> </div> <div style="background: #EEF3EF; flex-grow: 1; margin: 0.375em;"> <a href="" style="color: #040509;text-decoration: none; display: block; padding: 1em;">PAGE 9 </a> </div> <div style="background: #ABB5B2; flex-grow: 1; margin: 0.375em;"> <a href="" style="color: #040509;text-decoration: none; display: block; padding: 1em;">PAGE 10 </a> </div> <div style="background: #D9DBD6; flex-grow: 1; margin: 0.375em;"> <a href="" style="color: #040509;text-decoration: none; display: block; padding: 1em;">PAGE 11 </a> </div> <div style="background: #C4CDCE; flex-grow: 1; margin: 0.375em;"> <a href="" style="color: #040509;text-decoration: none; display: block; padding: 1em;">PAGE 12 </a> </div> </div> <!--END OF LINKS--> <!--FOOTER IMAGE--> <div style="height: 20px; display: flex; background: url('https://i.pinimg.com/564x/c6/eb/e7/c6ebe7a83d71e338f3dbd91e841b1d4b.jpg')bottom; background-size: cover; margin: 0.375em;"> </div> <!--END OF FOOTER IMAGE--> <!--CREDIT DO NOT REMOVE--> <div style="margin: 0.375em; text-align: right; font-size: 0.75em;"><a href="https://teacodes.dreamwidth.org/" style="opacity: 0.75; text-decoration: none;">code</a> </div> <!--END OF CREDIT DO NOT REMOVE--> </div>