可单击的下拉菜单项与页面对象元素对齐

Question

https://nigeldurham.github.io/ux/about

此可单击菜单的下拉菜单项响应于页面文本元素的“ margin-top”。我尝试将导航栏内容的z-indexing索引“浮动”在现有内容之上，但是似乎没有任何变化在起作用。

这里的任何见解将不胜感激。

谢谢。

'''

.topnav {
  position: fixed;
  color: black;
  right: 0;
}

.topnav #mylinks {
  display: none;
  margin-top: -138px;
} 

<div class="topnav">
<div id="mylinks">
<a href="https://nigeldurham.github.io/ux/about.html" style="font- 
weight: bold">about</a>
<a href="https://nigeldurham.github.io/ux/index.html">work</a>
<a href="https://nigeldurham.github.io/ux/contact.html">contact</a>
</div>
<a href="javascript:void(0);" class="icon" onclick="myFunction()">
<i class="fa fa-bars"></i>
</a>
</div>

Answer 1

能否请您检查以下我固定在450px及以下移动屏幕上的代码。

@media screen and (max-width:450px){
div#mylinks {
    margin-top: 0px !IMPORTANT;
}
.topnav {
    top: 56px;
    }
}

之前

现在