GuyPrimavera on "Dropdown menu help"

Dev site: smile.org/Word-Dev

I added:

/* positions submenus at right edges of parent */
#top-menu li li ul {
left: 100%;
}

to my child theme. For any submenu that extends beyond the (right) edge of the browser (check Missions > Past Missions), the background disappears.

If you remove that style, you'll see there is no background issue, but the child submenus no longer align with their parents.

I'd be grateful for any help with this issue!

**************************************************

Here's my code:

/* controls right padding on top nav items */
#top-menu li {
padding-right:12px;
}
/* controls top/bottom padding on submenus */
#top-menu li ul {
padding: 20px 0;
border-top:2px solid #CCCCCC;
}
/* changes color of menu items on mouseover */
#top-menu a:hover {
color:#afac95;
}
/* forces each submenu item onto its own line; and
prevents each submenu item line from breaking */
#top-menu li li {
display:block;
white-space:nowrap;
}
/* extends submenu backgrounds to include longest line */
#top-menu li ul {
width:auto;
}
/* positions submenus at right edges of parent */
#top-menu li li ul {
left: 100%;
}
/* colors background of nav items on hover
#top-menu li a:hover, .top-menu li a:hover {
opacity:1;
background-color:rgba(255, 255, 255, 1);
} */
/* controls padding-bottom on main nav */
.et_header_style_left #et-top-navigation nav > ul > li > a, .et_header_style_split #et-top-navigation nav > ul > li > a {
padding-bottom: 14px !important;
}
/* removes down arrow from menu parents with children */
#top-menu .menu-item-has-children > a:first-child::after {
display:none;
}
/* removes 20px right padding for down arrow on menu parents with children */
#top-menu .menu-item-has-children > a:first-child {
padding-right:0px;
}
/* positions submenu text within dropdown box */
#top-menu li li a {
width:100%;
padding:0;
}