JSFiddle - React, Tailwind, and code Playground

by Shanid

HTML

<div id ="nav">
        <div id = "nav_wrapper">
            <ul>
                <li><a href="#">Home</a></li><li>
                <a href="#">Home1</a></li><li>
                <a href="#">Home2</a></li><li>
                <a href="#">Home3</a>       
                    <ul>
                        <li><a href="#">Home3.1</a></li>
                        <li><a href="#">Home3.1</a></li>
                        <li><a href="#">Home3.1</a></li>
                        <li><a href="#">Home3.1</a>
                            <ul>
                                <li><a href="#">Home3.1</a></li>
                                <li><a href="#">Home3.1</a>
                                    <ul>
                                        <li><a href="#">Home3.1</a></li>
                                        <li><a href="#">Home3.1</a></li>
                                        <li><a href="#">Home3.1</a></li>
                                        <li><a href="#">Home3.1</a></li>
                                    </ul>
                                </li>
                            </ul>
                        </li>
                    </ul>

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

CSS

body {
  margin: 0;
  padding: 0;
  background: #ccc;
}

#nav
{
    background-color: #222;
}
#nav_wrapper
{
    width: 960px;
    margin: 0 auto;
    text-align: left;
}
#nav ul
{
    list-style-type: none;
    padding: 0;
    margin: 0;
    position: relative;
}
#nav ul li
{
    display: inline-block;
    position: relative;
}
#nav ul li a
{
    color: #ccc;
    display: block;
    padding : 15px;
    text-decoration: none;
}

#nav ui li a:hover{
    color: #ccc;
    text-decoration: none;
}
#nav ul ul{
    display: none;
    position : absolute;
}
#nav ul ul ul{
    left: 90px;
    top: 0;
}
#nav ul ul li{
    display:block;
}
#nav ul ul li a{
    background: #333;
    color: #fff;
}
#nav ul li:hover >a{
    background: #444;
}
#nav ul li:hover > ul{
    display: block;
}