WordPress DropDown Menu Background Colour

[anttechxyz]

Hello. I am using WordPress (sigh).
I am trying to change the colour of my 2nd level drop down background.
My theme does not allow me to edit this colour directly, however I am able to add custom CSS on top of the theme.

So I want the background to be light blue and the text to be white.

I’m using this code at the moment:

.second ul li {
	background-color: #00bed6;
}
.second ul li a span {
	color: #ffffff;
}

Which is giving me the following:

You can see above the light blue, there are black sections above and below I cannot seem to get rid of.

Can anybody suggest something to ensure the entire second level is light blue?

Here is the nav in full (taken from my theme):

<nav class="mkdf-main-menu mkdf-drop-down mkdf-default-nav">
	<ul id="menu-main" class="clearfix">
		<li id="nav-menu-item-100" class="menu-item menu-item-type-post_type menu-item-object-page menu-item-has-children  has_sub narrow">
			<a href="https://kwcc.onyx-sites.io/?page_id=30" class="">
				<span class="item_outer">
					<span class="item_text">
						About
					</span>
					<i class="mkdf-menu-arrow fa fa-angle-down"></i>
				</span>
			</a>
			<div class="second">
				<div class="inner">
					<ul>
						<li id="nav-menu-item-102" class="menu-item menu-item-type-post_type menu-item-object-page ">
							<a href="https://kwcc.onyx-sites.io/?page_id=34" class="">
								<span class="item_outer">
									<span class="item_text">
										Club History
									</span>
								</span>
							</a>
						</li>
						<li id="nav-menu-item-104" class="menu-item menu-item-type-post_type menu-item-object-page ">
							<a href="https://kwcc.onyx-sites.io/?page_id=38" class="">
								<span class="item_outer">
									<span class="item_text">
										Diversity Statement
									</span>
								</span>
							</a>
						</li>
					</ul>
				</div>
			</div>
		</li>
	</ul>
</nav>

Thanks in advance for any suggestions. It’s really annoying!

[anttechxyz]

Fixed using:

.mkdf-drop-down .narrow .second .inner ul {
    background-color: #00bed6;
 
}

[dresden_phoenix]

It’s hard to give an answer w/o looking at the whole thing ( layout and CSS)

but my first try would be to make the UL be the bg color:
.second ul { background-color: #00bed6;}

or even .second {background-color: #00bed6;}

is there any reason why you can’t get rid div.second? in the markup and make it ul.second?