css dropdown menu from ws3 website

Question

I just copied the css dropdown menu example from the ws3 website

aaand it doesnt work with my code. I checked to see if I made a typo, I didnt.

also I tried to just copy the code and see if it works, and it did, but when I put other stuff for my page in (like sub the ws3's content with mine) it doesnt.

Could you guys guide me through this please? Thank you :)

my code( html):

 <nav>
            <ul>
                <li><a href="#">front page</a></li>
                <li><a class ="active" href="#">paintings</a></li>
                <li class="dropdown"><a href="javascript:void(0)" class="dropbtn">Series</a>
                    <div class="dropdown-content">
                        <a href="#">City</a>
                        <a href="#">80's windbreaker</a>
                        <a href="#">Link 3</a>
                    </div>
                </li>
            </ul>
        </nav>

just the navigation bar section

css:

ul {
list-style-type: none;
margin: 0;
padding: 0;
overflow: hidden;
background-color: #333;
font-size:3em;
position:sticky;
top:0;
color:blue;
}


li {
float: left;
}

li a, .dropbtn {
display: inline-block;
color: white;
text-align: center;
padding: 14px 16px;
text-decoration: none;
}

li a:hover:not(.active), .dropdown:hover .dropbtn {
background-color: red;
}

li.dropdown {
display: inline-block;
}

.dropdown-content {
display: none;
position: absolute;
background-color: gray;
min-width: 160px;
z-index: 1;
}

.dropdown-content a {
color: black;
padding: 12px 16px;
text-decoration: none;
display: block;
text-align: left;
}

.dropdown-content a:hover {
background-color: red;

}

.dropdown:hover .dropdown-content {
display: block;
}

.active{
background-color: blue;
}

Answer 1

It looks like like the problem is the position: sticky on the <ul> element. Removing that allows the dropdown to work.