Using SASS in Custom Theme. Mostly problem with Nav/ sub-menu

This isn’t something I really have an example of online to share. I’ll post a screen cap is prob the best I can do to explain what I’m trying to do, and so you can see where I’m at. I’ll post the CSS. If this belongs in another forum, let me know because I couldn’t see any other place to post about themes vs plugins. It’s a navigation sub- sub-menu. I want the sub-sub menu part to “fly-out” when the parent element is hovered (or whenever). I’m getting close, but it’s complicated. Once I get past that, I think I’ll be okay.

Note: I realize the < li > in the sub menu are transparent. It should be solid off-white, or gray to look like the original.

.main-navigation {
	clear: both;
	display: block;
	float: right;
	width: total_site_width();

	ul {
        float:left;
		list-style: none;
		margin: 0;
		padding: 0 1em;
        li {
            float:left;
            ul{
                padding: $phi * 1rem;
                display: none;
                li ul:hover > li {
                    display:block;
                    left:100%;
                }
            }
            ul {
			box-shadow: 0 3px 3px rgba(0, 0, 0, 0.2);
			float: left;
			position: absolute;
			top: 100%;
			left: -999em;
			z-index: 99999;

			ul {
				left: -999em;
				/* top: 0; */
				top: 2rem;
				
			}

			li {

				&:hover > ul,
				&.focus > ul {
					display: block;
					left: auto;
				}
			}

			a {
				width: 200px;
			}

			:hover > a,
			.focus > a {
    border-bottom:0.2rem solid red;
			}

			a:hover,
			a.focus {
    border-bottom:0.2rem solid red;
			}
		}

        }

		
		li:hover > ul,
		li.focus > ul {
			left: auto;
		}
	}

	li {
		position: relative;

		&:hover > a,
		&.focus > a {
		}
	}

	a {
		display: block;
		text-decoration: none;
	}

	.current_page_item > a,
	.current-menu-item > a,
	.current_page_ancestor > a,
	.current-menu-ancestor > a {
	}

I guess You could say I started with a SASS tutorial, but abandoned it because I just wanted to dig into this project. There’s not any SASS in this part (though, it’s really cool! I wish I had more time to mess with it! i will continue as I complete this project).

The screenshot attempts to illustrate what I am going for in appearance. What I have (one version)
I also have a version where the sub sub-menu DOES go off to the right, but it’s only the text that’s moving.
What I want it to look like.
My question is:
Can you see anything in that CSS that I’ve done wrong, and what should I focus on to try to achieve what I want?

Thank you!

EDIT:
I meant to stress that I set out to complete a PSD to WP conversion project. I wanted a toturial for the ‘_s’ theme. I found one that I think is really helpful if anyone wants to check it out. There are a LOT out there. Trust me. This is the only one that really spoke to me, isn’t too fast, not too slow. It’s free, and I don’t think you’ll find anything more to the point on YouTube. It is pre FSE, however. It’s really more of a SASS tutorial. The linked URL is where I abandoned it to dive into the project.

• This topic was modified 1 year, 11 months ago by ajaxStardust.
• This topic was modified 1 year, 11 months ago by ajaxStardust.

The page I need help with: [log in to see the link]