Dropdown menu won't show with CSS

Question

I'm following this guide from weSchools to make a dropdown menu in my navigation bar.

My problem is it won't show unless I remove the CSS property overflow: hidden from the ul class. This ruins the layout of the page and removes background colours etc.

I've tried display: block toggled on/off but the dropdown menu doesn't appear either way, as it does with the w3school tutorial.

I think there is maybe some problem with using a custom class .sticky rather than ul directly in the CSS, is it inheriting or not inheriting something?

Here is my HTML/CSS. I've gone over it multiple times to compare to the w3schools example and can't find a difference other than the ul tag. If I remove .sticky from the ul nav list then it loses formatting and affects another ul at the footer. So I need to define a custom class for this header nav list.

.sticky {
    /*float: right;*/
    /*color: white;*/
    list-style-type: none;
    /*width: 100%;*/
    margin: 0;
    padding: 0;
    overflow: hidden;

    border-radius: 0 0 10px 10px;
    background-color: #333;
    position: sticky;
    top: 0;
    z-index: 2;
}

li {
    float: right;
    /*padding-right: 20px;*/
    /*padding-left: 20px;*/
    color: white;
}

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

    font-family: monospace;
    border-bottom: 2px solid #333;
    /*margin-bottom: 10px;*/
}

li a:hover, .dropdown:hover .dropBtn {
    /*background-color: #454542;*/
    text-decoration: none;
    color: white;
    /*border-radius: 10%;*/
    padding: 14px 16px;
    border-bottom: 2px solid #fff922;
}

li.dropdown {
    display: inline-block;
}

.dropdown-content {
    display: none;
    position: absolute;
    background-color: #f9f9f9;
    min-width: 160px;
    box-shadow: 0px 8px 16px 0px rgba(0,0,0,0.2);
    padding: 12px 16px;
    z-index: 1;
}

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

.dropdown-content a:hover {background-color: #f1f1f1;}

.dropdown:hover .dropdown-content{
    display: block;
    /*border-bottom: 2px solid #fff922;*/
}

li a:active {
    /*background-color: deeppink;*/
    /*    add some transition here */
}

<ul class="sticky">
    <li><a class="active" href="#contact">Contact</a></li>
    <li><a href="#">Projects</a></li>
    <li><a href="#about">About</a></li>
    <li class="dropdown">
            <a href="javascript:void(0)" class="dropBtn">Dropdown</a>
            <div class="dropdown-content">
                <a href="#">Item</a>
                <a href="#">Item</a>
                <a href="#">Item</a>
                <a href="#">Item</a>
            </div>
    </li>
    <li><a href="#home">Home</a></li>
</ul>

Answer 1

Remove position:sticky; from the selector, sticky is a keyword so I have changed that to Links for reference.

.Links {
  /*float: right;*/
  /*color: white;*/
  list-style-type: none;
  /*width: 100%;*/
  margin: 0;
  padding: 0;
  overflow: hidden;
  border-radius: 0 0 10px 10px;
  background-color: #333;
  top: 0;
  z-index: 2;
}

li {
  float: right;
  /*padding-right: 20px;*/
  /*padding-left: 20px;*/
  color: white;
}

li a,
.dropBtn {
  display: inline-block;
  color: white;
  text-align: center;
  padding: 14px 16px;
  text-decoration: none;
  font-family: monospace;
  border-bottom: 2px solid #333;
  /*margin-bottom: 10px;*/
}

li a:hover,
.dropdown:hover .dropBtn {
  /*background-color: #454542;*/
  text-decoration: none;
  color: white;
  /*border-radius: 10%;*/
  padding: 14px 16px;
  border-bottom: 2px solid #fff922;
}

li.dropdown {
  display: inline-block;
}

.dropdown-content {
  display: none;
  position: absolute;
  background-color: #f9f9f9;
  min-width: 160px;
  box-shadow: 0px 8px 16px 0px rgba(0, 0, 0, 0.2);
  padding: 12px 16px;
  z-index: 1;
}

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

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

.dropdown:hover .dropdown-content {
  display: block;
  /*border-bottom: 2px solid #fff922;*/
}

<ul class="Links">
  <li><a class="active" href="#contact">Contact</a></li>
  <li><a href="#">Projects</a></li>
  <li><a href="#about">About</a></li>
  <li class="dropdown">
    <a href="javascript:void(0)" class="dropBtn">Dropdown</a>
    <div class="dropdown-content">
      <a href="#">Item</a>
      <a href="#">Item</a>
      <a href="#">Item</a>
      <a href="#">Item</a>
    </div>
  </li>
  <li><a href="#home">Home</a></li>
</ul>