Wie kann ich meinen dunkelblauen Dropdown-Hintergrund undurchsichtig machen?

Question

Ich habe ein Bild angehängt, das mein Dropdown zeigt. Das Problem ist, dass Sie immer noch den Text hinter dem Dropdown sehen können. Ich möchte, dass es tiefblau ist, damit der Text dahinter verborgen bleiben kann. Wie kann ich dies mit CSS ändern, so dass der Hintergrund den Text dahinter nicht sehen lässt? Wie Sie auf dem Bild sehen können, kann ns durch dieses Dropdown gesehen werden. Und die letzten 12 Monate überlappen sich irgendwie.

hier ist der CSS-Code der Registerkarten

.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

Sie benötigen die Opazität von Ihrem rgba Hintergrundfarbe

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

Wenn Sie die

ändern entfernen

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

zu

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

Es wird die Opazität Herstellung der Farbkörper

mit Ihrem Code entfernen Änderung

.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); 
} 

zu

.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); 
}