JSFiddle - React, Tailwind, and code Playground

HTML

<nav>
    <ul>
        <li><a href="#">Menu #1</a>
         <ul>
             <li><a href="#">Menu #11</a></li>
             <li><a href="#">Menu #12</a></li>
             <li><a href="#">Menu #13</a></li>
             <li><a href="#">Menu #14</a></li>
             <li><a href="#">Menu #15</a></li>
             <li><a href="#">Menu #16</a></li>
             <li><a href="#">Menu #17</a></li>
             <li><a href="#">Menu #18</a></li>
             <li><a href="#">Menu #19</a></li> 
            </ul>
        </li>
        <li><a href="#">Menu #2</a></li>
        <li><a href="#">Menu #3</a></li>
    </ul>
</nav>
<iframe width="560" height="315" src="//www.youtube.com/embed/4IOhGQvdCBg" frameborder="0" allowfullscreen></iframe>

CSS

nav {
    background: black; 
    height: 50px; 
    line-height:50px; 
    width:100%; 
    display:inline-block; 
    font-family: arial;
}
nav ul {
    padding:0; 
    margin:0;
}
nav ul li {
    float:left;
    position:relative; 
    padding: 0 10px;
    border-right: 1px solid #777777;
    width:100px;
    list-style:none;
}
nav ul li:hover {
    background: #444;
}
nav ul li ul {
    position:absolute; 
    top:50px; 
    left:0; 
    display: none; 
    background: #333; 
    z-index: 999;
}
nav ul li:hover ul {
    display: block;
}
nav ul li a {
    color: white; 
    text-decoration:none;
}
nav ul li ul li {
    border:none; 
}