Dropdown color block background behind nav when hovering on nav items

My site: https://giraffe-giraffe-em23.squarespace.com/ (password: heather)

Hi! I'm looking to have a dropdown color background when hovering on any of the nav items. I want the whole header (logo, all nav items) to still be visible in front of this color block, but not any page content or footer content. I was able to get the background color to change according to each nav item, but I can't figure out the best way to have the rest of the page disappear. 

I was also hoping this color can slide down as it appears, but not a necessity. 

I'm attaching screenshots of what I have currently, versus the vision I've mocked up. On the mockup you'll notice a small piece of text below the nav item "design" which is also part of my vision when hovering on each nav item, but I haven't attempted this part yet.

Use this code to Custom CSS box

body:has([href="/design"]:hover) div.header-nav-item:nth-child(1)>a:after {
    content: "I develop visual brand stories";
    display: block;
    position: absolute;
    max-width: 300px;
    white-space: pre-wrap;
    text-align: left;
}

Initial

Hover Design