Prevent my vertical dropdown menu from getting wrapped around my <p>

Question

I've created a dropdown using CSS. However it's getting wrapped around my <p> text. How do I correct my CSS so it displays on top of the text when on hover.
My dropdown disappears under the text on the page which I haven't posted here.

<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>

.menu {height: 50px;
       width: 100%;
       display: block;
       }

       li {float: left;
           list-style-type: none;
       }


a {display: block;
   text-align: center;
   text-decoration: none;
   color: #000000;
   padding: 15px 15px 15px 15px;   
   overflow: hidden;
   background-color:#009899;}

/* Change the link color to #00CED1 on hover */
 li a:hover {background-color: #00CED1;
} 

/* Style dropdown menu in Research section */
.dropdown {position: relative;
           display: block;}

.drop-content {position: absolute;
               display: none;
               list-style-type: none;
           }

           /*style content inside the dropdown*/
.drop-content a {color: black;
             text-decoration: none;
             display: block;
             min-width: 140px;
             }         

             /* Show dropdown menu on hover*/
.dropdown:hover > .drop-content {display: block;
                                 }  

Answer 1

Works for me on Firefox 43 without any adjustment:

http://codepen.io/anon/pen/adVOeG

If not add the z-index-Attribute to .drop-content: W3C School.