JSFiddle - React, Tailwind, and code Playground

by techsin

HTML

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

            </li>
            <li><a href="#">Tutorials</a>

                <ul>
                    <li><a href="#">Web Design</a>

                    </li>
                    <li><a href="#">Photoshop</a>

                    </li>
                    <li><a href="#">Illustrator</a>

                    </li>
                    <li><a href="#">Other</a>

                        <ul>
                            <li><a href="#">Sublime Text</a>

                            </li>
                            <li><a href="#">After Effects</a>

                                <ul>
                                    <li><a href="#">Sublime Text</a>

                                    </li>
                                    <li><a href="#">After Effects</a>

                                    </li>
                                </ul>
                            </li>
                        </ul>
                    </li>
                </ul>
            </li>
            <li><a href="#">Articles</a>

                <ul>
                    <li><a href="#">Sublime Text</a>

                    </li>
                    <li><a href="#">After Effects</a>

                    </li>
                </ul>
            </li>
            <li><a href="#">Inspirations</a>

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

CSS

* {
margin:0;
padding:0;
}

html,body {
height:100%;
width:100%;
}

body {
 background-size:contain;
background:url(http://hdnaturepictures.com/wp-content/uploads/2013/05/Beautiful-Dream-Beach.jpg);
background-repeat:no-repeat;
}

.container {
margin:auto;
width:1100px;
padding:5px;
}

nav {
height:50px;
margin-top:20px;
position:relative;
z-index:1000;
}

nav ul li {
background-color:rgba(0,0,0,0.5);
display:block;
height:50px;
line-height:50px;
text-align:center;
vertical-align:top;
width:130px;
}

nav>ul>li {
margin-left:10px;
display:inline-block;
}

nav >ul> li:first-child {
margin-left:0;
}


nav ul li a {
color:#FFF;
cursor:default;
font-family:Open Sans;
text-decoration:none;
}

nav ul li:hover {
background-color:rgba(0,0,0,1);
}


nav ul ul {
display:none;
}
nav ul>li>ul {margin-top:-1px;}

nav ul li:hover > ul {
display:block;
}

ul ul ul {
left:130px;
position:relative;
top:-51px;
}