JSFiddle - React, Tailwind, and code Playground

HTML

<nav>
    <ul>
    <li>
        <a href="#">Home</a>
    </li>

    <li>
        <a href="#">About</a>
        <ul>
            <li>
                <a href="#">The product</a>
                  <ul>
                    <li><a href="#">The product nested</a></li>

                    <li><a href="#">Meet the team Nested</a></li>
                </ul>
            </li>

            <li><a href="#">Meet the team</a></li>
        </ul>
    </li>
    <li>
        <a href="#">Services</a>

        <ul>
            <li><a href="#">Sevice one</a></li>
            <li><a href="#">Sevice two</a></li>

            <li><a href="#">Sevice three</a></li>
            <li><a href="#">Sevice four</a></li>
        </ul>

    </li>
    <li>
        <a href="#">Product</a>
        <ul>
            <li><a href="#">Small product (one)</a></li>

            <li><a href="#">Small product (two)</a></li>
            <li><a href="#">Small product (three)</a></li>
            <li><a href="#">Small product (four)</a></li>

            <li><a href="#">Big product (five)</a></li>
            <li><a href="#">Big product (six)</a></li>
            <li><a href="#">Big product (seven)</a></li>

            <li><a href="#">Big product (eight)</a></li>
            <li><a href="#">Enourmous product (nine)</a></li>
            <li><a href="#">Enourmous product (ten)</a></li>

            <li><a href="#">Enourmous product (eleven)</a></li>
        </ul>
    </li>
    <li>
        <a href="#">Contact</a>

        <ul>
            <li><a href="#">Out-of-hours</a></li>
            <li><a href="#">Directions</a></li>

        </ul>
    </li>
</ul>

CSS

/* =Menu
----------------------------------------------- */
nav {
	float: left;
	border:1px solid #ccc;
	background-color:#fff;
	margin-top:40px;
	position:relative;
	width:976px;
	z-index:1000;
	box-shadow:0 1px 0px #fff;
}
.home #nav {
	box-shadow: none;
}
nav ul {
	margin: 0px;
	list-style: none;
}
nav ul li {
	border-bottom: 1px solid #CCCCCC;
	border-right: 1px solid #CCCCCC;
	float: left;
	margin-bottom: -1px;
	position: relative;
}
nav ul li a {
	padding: 0 15px;
	display: block;
	color: #fff;
	font-size: 15px;
	line-height: 48px;
	color: #444;
	float: left;
}
nav ul li a:hover, 
nav ul li.current-menu-item a,
nav ul li.current-menu-parent a,
nav ul li.current_page_item a,
nav ul li.current_page_ancestor a,
nav ul li:hover > a {
	background-color: #444;
	color: #fff;
}

/* Dropdown menu */
nav ul li ul , nav ul li :hover ul li ul {
	display:none;
	list-style:none none;
	z-index: 9999;
}
nav ul li:hover ul, nav ul li ul :hover ul {
	display:block;
}
nav ul li ul {
	position:absolute;
	background-color:#444;
	top:48px;
	left:0px;
	padding:0px;
	width:185px;
	margin:0px;
	border-right: 1px solid #555555;
	border-left: 1px solid #555555;
	border-top: 1px solid #555555;
}
nav ul li ul li ul {
	left:185px;
	top:-1px;
}
nav ul li ul li {
	float:none;
	border-bottom:1px solid #666;
	border-right:0 none;
}
nav ul li ul li ul li{
	float:none;
	border-bottom:1px solid #666;
	border-right:0 none;
}
nav ul li ul li a {
	padding: 7px 10px;
	color: #999;
	float:none;
	line-height: 18px;
	font-size: 13px;
	font-weight: normal;
}
nav ul li ul li a:hover, nav ul li ul li:hover > a {
	background-color:#333;
	text-decoration:none;
	color:#fff;
}