Submenu navigation in underscores theme

Hi,

I’m trying to customize an underscores-based theme but I’m having difficulty with the display of submenu nav items on both mobile and desktop. On desktop, the background of the submenu is transparent and I’d like it white. On mobile, I’d prefer it if the submenu items simply appeared on menu toggle; as it is right now, they appear behind the other menu items and are unusable. I tried to target the submenu’s class but it didn’t do anything. I’m pasting here all the nav-related CSS; please advise if there’s something I’m not seeing and/or somewhere else I need to be working, or if you need more info. Thanks!

.main-navigation {
	display: block;
}

.main-navigation ul {
	display: none;
	list-style: none;
	margin: 0;
	padding-left: 0;
}

.main-navigation ul ul {
	box-shadow: 0 3px 3px rgba(0, 0, 0, 0.2);
	float: left;
	position: absolute;
	top: 100%;
	left: -999em;
	z-index: 99999;
}

.main-navigation ul ul ul {
	left: -999em;
	top: 0;
}
ul.submenu li {
	background-color: #fff;;
}

.main-navigation ul ul li:hover > ul,
.main-navigation ul ul li.focus > ul {
	display: block;
	left: auto;
}

.main-navigation ul ul a {
	width: 200px;
}

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

.main-navigation li {
	position: relative;
	padding: .5rem;
}

.main-navigation a {
	display: block;
	text-decoration: none;
}

.site-header {
	display: flex;
	flex-flow: row-reverse wrap;
	justify-content: space-between;
	align-items: center;
	max-width: 1200px;
	margin: 0 auto;
}

.site-branding {
	padding: 1rem;
	font-size: 1.75rem;
}

/* Small menu. */
.menu-toggle,
.main-navigation.toggled ul {
	display: block;
	font-size: 1.5rem;
    background: transparent;
    border-color: transparent;
}

@media screen and (min-width: 768px) {

	.menu-toggle {
		display: none;
	}

	.main-navigation ul {
		display: flex;
		justify-content: flex-end;
	}

	.main-navigation li {
		padding: 1rem;
	}

	.site-header {
		display: flex;
		flex-flow: row-reverse wrap;
		justify-content: space-between;
	}
}

• This topic was modified 4 years, 4 months ago by Jan Dembowski. Reason: Moved to Fixing WordPress, this is not an Developing with WordPress topic