响应式下拉导航栏

Question

我的导航中有一个下拉列表，我试图找出如何使用845px的媒体查询来更改它。根据我目前的代码，我的下拉列表似乎落后于背景，我也失去了我的第一个导航链接。

<nav class="center">
<ul>
<li><a href="index.html">Home</a></li>
<li class="drop">
<a href="cast.html" class="dropbut">The Cast<i class="fa fa-caret-down">
</i></a><div class="drop-list">
<a href="https://en.wikipedia.org/wiki/Jason_Bateman" 
target="_blank">Jason Bateman</a>
<a href="https://en.wikipedia.org/wiki/Rachel_McAdams" 
target="_blank">Rachel McAdams</a>
<a href="https://en.wikipedia.org/wiki/Kylie_Bunbury" 
target="_blank">Kylie Bunbury</a>
<a href="https://en.wikipedia.org/wiki/Lamorne_Morris" 
target="_blank">Lamorne Morris</a>
<a href="https://en.wikipedia.org/wiki/Kyle_Chandler" 
target="_blank">Kyle Chandler</a>
<a href="https://en.wikipedia.org/wiki/Jesse_Plemons" 
target="_blank">Jesse Plemons</a>
<a href="https://en.wikipedia.org/wiki/Billy_Magnussen" 
target="_blank">Billy Magnussen</a>
<a href="https://en.wikipedia.org/wiki/Sharon_Horgan" 
target="_blank">Sharon Horgan</a>
<a href="https://en.wikipedia.org/wiki/Jonathan_Goldstein_(filmmaker)" 
target="_blank">Jonathan Goldstein- Director</a>
<a href="https://en.wikipedia.org/wiki/John_Francis_Daley" 
target="_blank">John Francis Daley- Director</a>
</div></li>
<li><a href="trailer_and_reviews.html">Take A Peek</a></li>
</ul>
</nav>

和CSS

/*responsive info*/
@media only screen and (max-width: 845px) {
nav {
display: flex;
position: relative;
z-index: 6;
}
li a .drop-list .dropbut {
display: none;
}

ul {
display: block;
height: auto;
position: absolute;
left: 0;
right: 0;
}
ul li {
width: 100%;
float: none;
}
}

我对此很新，我现在完全糊涂了。非常感谢任何帮助。

以下是我currently have

这就是I want