修复了导航栏但下拉菜单不再可见

Question

我正在创建一个带有下拉菜单的固定导航栏。不幸的是，当栏固定时，下拉菜单不可见。我希望页面在必要时滚动，但导航栏必须始终可见。 我已经看过几篇关于此的帖子，但没有一个给定的解决方案对我有用。

下面的代码可以正常工作，但是当删除 /*position: fixed;*/ 周围的注释标记时，就会出现问题。

问候

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

这是因为你有溢出隐藏overflow: hidden;从选择器中删除它是固定的。

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 */
}

小提琴https://jsfiddle.net/fdkjuf02/1/