Fixed navigation bar but dropdown menu not visible anymore

Question

I'm creating a fixed navigation bar with a dropdown menu. Unfortunately the dropdown menu isn't visible when the bar is fixed. I want the page to scroll when neccesary but the navigation bar must always be visible. I've seen several posts on this, but none of the given solutions worked for me.

The code below works fine but when removing the comment marks around /*position: fixed;*/ the trouble occurs.

Regards

p {
  font-family: Arial, Times, serif;
}
ul {
  list-style-type: none;
  font-family: Arial, Times, serif;
  margin: 10;
  padding: 0;
  overflow: hidden;
  background-color: #555555;
  text-decoration: none;
  /* remove comment below to see effect*/
  /*position: fixed;*/
  top: 0;
  width: 100%;
  /* Full width */
}
li {
  float: left;
}
/* Add a gray right border to all list items, except the last item (last-    child) */

li {
  border-right: 1px solid #bbbbbb;
}
li:last-child {
  border-right: none;
}
/* Add an ''active'' to current link to know user which page he is on */

li a.active {
  background-color: #4CAF50;
  color: #ffffff;
}
li a,
.dropbtn {
  display: inline-block;
  color: white;
  text-align: center;
  padding: 8px 16px;
  text-decoration: none;
}
li a:hover,
.dropdown:hover .dropbtn {
  background-color: #4CAF50;
  color: #ffffff;
}
li.dropdown {
  display: inline-block;
}
.dropdown-content {
  display: none;
  position: absolute;
  background-color: #f9f9f9;
  min-width: 100px;
  box-shadow: 0px 8px 16px 0px rgba(0, 0, 0, 0.2);
  z-index: 1;
}
.dropdown-content a {
  color: #000000;
  padding: 8px 16px;
  text-decoration: none;
  display: block;
  text-align: left;
}
.dropdown-content a:hover {
  background-color: #4CAF50
}
.dropdown:hover .dropdown-content {
  display: block;
}

<ul>
  <li class="dropdown">
    <a class="active" href="javascript:void(0)">Startpages</a>
    <div class="dropdown-content">
      <a class="active" href="#">Home</a>
      <a href="#">Afdeling A</a>
      <a href="#">Afdeling B</a>
      <a href="#">Afdeling C</a>
      <a href="#">Afdeling D</a>
      <a href="#">Afdeling E</a>
      <a href="#">Afdeling F</a>
      <a href="#">Afdeling G</a>
      <a href="#">Afdeling H</a>
      <a href="#">Afdeling I</a>
    </div>
  </li>

</ul>
<font size="3"></font>
<p>&nbsp;</p>
<table bordercolor="" border="0" cellspacing="10" cellpadding="2">
  <tbody>
    <tr>
      <td><font color="#555555" face="Arial" size="4"><b>Home</b></font>
      </td>
    </tr>
    <tr>
      <td><font face="Arial" size="2"><i>Quick ...</i></font>
      </td>
    </tr>
    <tr>
      <td><font face="Arial" size="2">Absence</font>
      </td </tr>
      <tr>
        <td><font face="Arial" size="2">Phonelist</font>
        </td>
      </tr>
      <tr>
        <td><font face="Arial"> </font>
        </td>
      </tr>
      <tr>
        <td><font face="Arial"> </font>
        </td>
      </tr>
  </tbody>
</table>

Answer 1

It is because you have the overflow hidden overflow: hidden; remove it from the selector which is fixed.

ul {
list-style-type: none;
font-family: Arial, Times, serif;
margin: 10;
padding: 0;

background-color: #555555;
text-decoration: none;
/* remove comment below to see effect*/
position: fixed;
top: 0;
width: 100%; /* Full width */
}

fiddle https://jsfiddle.net/fdkjuf02/1/