I can't get multi-level navigation in my first real project to work

So I’ve just started my first real project so that I have something fun to constantly work on while learning, I’ve also read a lot that the best way to learn is by actually building stuff so I’m giving it a go. For this project I’ve decided to build a ‘web journal’ which will pretty much be a normal journal only built using html, css and javascript. I’ll make tweaks to it over time and add journal entries, goals, links to other projects, etc.

Right now i’m trying to add another level to my vertical navigation which is opened by clicking a button. I want the second level to start from the “contents” list item and open up to the right of it. No matter what I try though I can’t get the navigation to show on the right of that item. Once i can at least get it to show in the right position I’ll add some css to make it hidden until the contents item is hovered.

The closest I got to making this work was after removing “overflow-x: hidden” from the side-nav css but that caused issues with position of the button used to close the nav menu.

Here is my project on codepen where I make my updates before updating the master files on my computer.

https://codepen.io/TasmaniZen/project/editor/AdYxkw

edit: I’d also like the read more button to be hidden when the side navigation is visible and reappear when the side navigation is closed. I’ve tried this by adding a few different functions in the open and close functions for the side-nav but nothing seems to work, any advise in this too?

I’m trying to just get the sub nav to appear to the right of the ‘content’ list item first and I was thinking I would then just put the display of that code to hidden, and add a function to change it to visible. So I haven’t added the JavaScript to make it appear yet because I’m still trying to figure how to put it where I want it.