Html 防止我的垂直下拉菜单缠绕在我的<；p>；

我已经用CSS创建了一个下拉列表。然而，它被我的

文本所包围。如何更正CSS，使其在悬停时显示在文本顶部。
我的下拉列表消失在我没有在这里发布的页面文本下

<div id="container">
<div class="menu">
<ul>
<li><a href="index1.html">Home</a></li>
<li><a href="aboutus.html">About</a></li>
<li class="dropdown">
<a href="read.html">Read</a>
<ul class="drop-content">
<li><a href="#">Latest Issue</a></li>
<li><a href="#">Prose</a></li>
<li><a href="#">Poetry</a></li>
<li><a href="#">Transalations</a></li>
</ul>
</li>

<li><a href="newsandevents.html">News and Events</a></li>
</ul>
</div>

---

适用于Firefox 43，无需任何调整：

---

如果没有添加

z-index

-属性到

。删除内容
：。
在Firefox43上对我有效，无需任何调整：



如果没有添加
z-index
-属性到
。删除内容
：。
尝试在下拉类中添加1左右的z-index。尝试在下拉类中添加1左右的z-index。