JSFiddle - React, Tailwind, and code Playground

by JeroenGerth

HTML

<nav>
        <ul id="menu">
            <li><a href="#">Home</a></li>
            <li><a href="#">Tutorials &gt;</a>
                <ul class="submenu">
                    <li><a href="#">Photoshop 1</a></li>
                    <li><a href="#">Dreamweaver 2</a></li>
                    <li><a href="#">Photoshop 3</a></li>
                    <li><a href="#">InDesign 4</a></li>
                    <li><a href="#">Bridge 5</a></li>
                    <li><a href="#">Lightroom 6</a></li>
                    <li><a href="#">After Effects 7</a></li>
                    <li><a href="#">Premiere 8</a></li>
                    <li><a href="#">Motion 9</a></li>
                    <li><a href="#">Aperture 10</a></li>
                    <li><a href="#">iPhoto 11</a></li>
                </ul>
            </li>
            <li><a href="#">Downloads &gt;</a>
            <ul class="submenu">
                    <li><a href="#">Wallpapers 1</a></li>
                    <li><a href="#">PSD files 2</a></li>
                    <li><a href="#">Video's 3</a></li>
                    <li><a href="#">Soundeffects 4</a></li>
                    <li><a href="#">Icons 5</a></li>
                    <li><a href="#">Maps 6</a></li>
                </ul>
            </li>
            <li><a href="#">About me</a></li>
            <li><a href="#">Contact</a></li>
        </ul>
    </nav>

CSS

body {
	background-color: #E9E9E9;
	}

nav ul { 
	margin: 0px;
	padding: 0px 20px; 
	background-color:#444;
	color: #fff; 
	list-style: none; 
	position:relative; 
	display:inline-table; 
	border-radius: 5px; 
	}
	
	nav ul:after {
		content: ""; clear: both; display: block;
	}

nav ul li {
	float:left; 
	}
	
	nav ul li a {
		padding: 10px 20px; 
		color: #fff; 
		font-family: Calibri, Verdana, sans-serif; 
		text-decoration:none; 
		display: block; 
		-webkit-transition: all 0.2s ease-in-out;
		-moz-transition: all 0.2s ease-in-out;
		-o-transition: all 0.2s ease-in-out;
		transition: all 0.2s ease-in-out;
		}
	
		nav ul li a:hover {
			color: #66D1D3 
			}
	
nav ul ul { 
	display:block; 
	border-radius:0px; 
	padding: 0px; 
	position: absolute; 
	background-color:#fff;
	color: #000; 
	visibility:hidden;
    opacity:0;
    transition:all ease-in-out 0.4s;
	left: 0px;
	top: 100%;
	width: 100%;
	columns:100px 3;
	-webkit-columns:100px 3; /* Safari and Chrome */
	-moz-columns:100px 3; /* Firefox */
	}

			nav ul li:hover > ul { 
					visibility:visible;
  					opacity:1;
  					transition-delay:0s;
					}
	
nav ul ul:before {
    content: "";
    display: block;
    height: 20px;
    position: absolute;
    width: 100%;
}

	nav ul ul li {
		float: none; 
		border-bottom: 1px #CCCCCC dotted; 
		position:relative; 
				}
		
		nav ul ul li a {
			color: #000; 
			 -webkit-transition: all 1s ease-in-out;
			-moz-transition: all 0.2s ease-in-out;
			-o-transition: all 0.2s ease-in-out;
			transition: all 0.2s ease-in-out;
			}
		nav ul ul li a:hover { 
			color: #66D1D3;
			background-color: #444;
			}