JSFiddle - React, Tailwind, and code Playground

HTML

<nav class="p-nav">
    <ul class="portal-menu">
        <li>
            <a href="">Invoicing</a>
            <ul>
                <li><a href="">Create an Invoice</a></li>
                <li><a href="">View sent Invoices</a></li>
                <li><a href="">View rejected Invoices</a></li>
            </ul>
        </li>
        <li>
            <a href="">Services</a>
            <ul>
                <li><a href="">Service 1</a></li>
                <li><a href="">Service 2</a></li>
                <li><a href="">Service 3</a></li>
            </ul>
        </li>            
    </ul>
</nav>

CSS

@import "http://necolas.github.io/normalize.css/3.0.0/normalize.css"
@import "http://fonts.googleapis.com/css?family=Open+Sans:400,300"

a { text-decoration: none; }
ol,ul { list-style: none; margin: 0; padding: 0; }

body {
  font-family: 'openSansLight',sans-serif;
  font-weight: 400;
}

nav.p-nav {
  display: inline-block;
  width: 680px;
  height: 30px;
  line-height: 30px;
  padding: 0 15px;
  text-transform: uppercase;
  font-size: 13px;
}


/* LEVEL 1 */

nav.p-nav ul li {
  float: left:
  position: relative;
  display: inline-block;
  background-color: #e2e2e2;
  margin-right: 20px;
}

nav.p-nav ul li ul {
  position: absolute;
  top: 33px;
  display: none;
}

nav.p-nav ul li ul li {
  display: block;
}

nav.p-nav ul li:hover ul {
    display: block;
}