Opacity only on ul not on li css

Question

I have a list with a height of 300px and I want the background to have an opacity. But the list items have to stay the same (opacity 1). How can I do this? This is my code:

HTML:

<div class="dropdown">
                    <span class="notif">2</span>
                    <ul class="dropdown-menu">
                        <li><a href="#"><span>Elisadehasque</span> liked your story in <span>Disneyland Paris</span><span class="done">x</span></a></li>
                        <li><a href="#"><span>Petyana</span> started following you<span class="done">x</span></a></li>
                    </ul>
                </div>

CSS:

    .dropdown .dropdown-menu {
    position: absolute;
    top: 100%;
    display: none;
    margin: 0;
    margin-left: -100px;

    padding: 0;
    height: 300px;
    width: 250px;
    background-color: #fff;
    z-index: 10;
    opacity: 0.8;
}

.dropdown-menu li {
    z-index: 999999;
    opacity: 1;
}

Answer 1

Use rgba:

.dropdown .dropdown-menu {
    background-color: rgba(255, 255, 255, 0.8);
}

---

From the documentation:

rgba()

Colors can be defined in the Red-green-blue-alpha model (RGBa) using the rgba() functional notation. RGBa extends the RGB color model to include the alpha channel, allowing specification of the opacity of a color. a means opacity: 0=transparent; 1=opaque;

rgba(255,0,0,0.1) /* 10% opaque red */

rgba(255,0,0,0.4) /* 40% opaque red */

rgba(255,0,0,0.7) /* 70% opaque red */

rgba(255,0,0, 1) /* full opaque red */

Answer 2

make the following changes on ur css

.dropdown .dropdown-menu {
    background-color: rgba(255,255,255,0.5);
}