How can I make my dark blue dropdown background non-transparent

Question

I have attached an image showing my dropdown. The issue is that you can still see the text behind the dropdown. I want it to be deep blue so the text behind it can be hidden. How can I change this with CSS so that the background won't let me see the text behind it ? As you can see on the image, ns can be seen through that dropdown. And last 12 months is kind of overlapped.

here is the CSS code of the tabs

.menu_button {
    width: 19%;
    height: 30px;
    background: #1A3F73;
    float: left;
    margin-right: 5px;
    margin-bottom: 10px;
    text-align: center;
    border: 1px solid black;
    border-radius: 5px;
    color: #f4f442;
    font-weight: bold;
    font-size: 13px;
}

.menu_button ul {
    margin-top: 10px;
    background: #1A3F73;
    list-style-type: none;
    width: 100%;
    display: none;
    margin-left: 0px;
    background: rgba(128,128,128,0.7);
}

.menu_button li {
    height: 30px;
    background: #1A3F73;
    margin: 0px;
    width: 100%;
    opacity: 1;
}

HTML

<a style='color:#f4f442;' href ='course/view.php?id=11'><div class ='menu_button'><span class='middle daily'>Daily Magic Spells</span><br /><div class='dd'><ul><li class='recent'><a style='color:#f4f442' href='recent.php'>Most recent leaders</a></li><li class='threem'><a style='color:#f4f442' href='three-month.php'>last 3 months</a></li><li class='sixm'><a style='color:#f4f442' href='six-month.php'>last 6 months</a></li><li class='twelvem'><a style='color:#f4f442' href='year.php'>last 12 months</a></li></ul></div></div></a>

Answer 1

You need to remove the opacity from your rgba background color

.test{
  height: 100px;
  width: 100px;
  background-color: rgba(26,63,115, .5)
}

If you change the

  background-color: rgba(26,63,115, .5)

to

  background-color: rgba(26,63,115, 1)

It will remove the Opacity making the color solid

With your code change

.menu_button ul {
    margin-top: 10px;
    background: #1A3F73;
    list-style-type: none;
    width: 100%;
    display: none;
    margin-left: 0px;
    background: rgba(128,128,128,0.7);
}

to

.menu_button ul {
    margin-top: 10px;
    background: #1A3F73;
    list-style-type: none;
    width: 100%;
    display: none;
    margin-left: 0px;
    background: rgba(128,128,128,1);
}