JSFiddle - React, Tailwind, and code Playground

Responsive CSS3 Mega Menu

by Jennifer Perrin

HTML

<link rel="stylesheet" type="text/css" href="http://fonts.googleapis.com/css?family=Cuprum:400,700,300,200"/>

<div class="mR style">
	<ul class="mR">

		<li><a href="http://jenniferperrin.com">Home</a></li>

		<li><a href="#">From the Blog</a>

			<div class="menuResponse full-width">

				<div class="col-1">
					<h4>Tutorials</h4>
					<ol>
						<li><a href="http://jenniferperrin.com/blog/tutorial-jquery-sliding-login-panel/">jQuery Sliding Login Panel</a></li>
						<li><a href="http://jenniferperrin.com/blog/tutorial-getsocial-css-powered-social-media-list/">GetSocial – CSS Powered Social Media List</a></li>
						<li><a href="http://jenniferperrin.com/blog/jquery-animated-skill-bars-tutorial/">jQuery Animated Skill Bars</a></li>
						<li><a href="http://jenniferperrin.com/blog/tutorial-jquery-animated-skill-bars-part-ii/">jQuery Animated Skill Bars Part II</a></li>
						<li><a href="http://jenniferperrin.com/blog/tutorial-simple-twitter-scroller-using-jquery/">Simple Twitter Scroller Using jQuery</a></li>
					</ol>
				</div>
				
				<div class="col-1">
					<h4>Code Snippets</h4>
					<ol>
						<li><a href="http://jenniferperrin.com/blog/css-styled-team-profile-layout/">CSS Styled Team Profile Layout</a></li>
						<li><a href="http://jenniferperrin.com/blog/profile-image-with-jquery-hover-effect/">Profile Image with jQuery Hover Effect</a></li>
						<li><a href="http://jenniferperrin.com/blog/css-snippets-media-query/">Media Query</a></li>
						<li><a href="http://jenniferperrin.com/blog/snippet-php-if-ie/">PHP if IE</a></li>
					</ol>
				</div>
				
				<div class="col-1">
					<h4>CSS</h4>
					<ol>
						<li><a href="http://jenniferperrin.com/blog/css-styled-team-profile-layout/">CSS Styled Team Profile Layout</a></li>
						<li><a href="http://jenniferperrin.com/blog/tutorial-getsocial-css-powered-social-media-list/">GetSocial – CSS Powered Social Media List</a></li>
						<li><a...

CSS

.mR {
	display:block;
	position:relative;
    font-family: 'Cuprum';
}

.mR,.mR ul {
	margin:0;
	padding:0;
	list-style:none;
	position:relative;
}

.mR ul a {
	float:left;
}

.mR ul ul a {
	float:none;
}

.mR .menuResponse a {
	float:none;
	padding:0;
}

.mR ul ul,.mR .menuResponse,.mR .menuResponse ol li {
	opacity:0;
	visibility:hidden;
	display:none ! important/9;
    
	-webkit-transition:opacity 150ms ease-in-out;
	   -moz-transition:opacity 150ms ease-in-out;
        -ms-transition:opacity 150ms ease-in-out;
         -o-transition:opacity 150ms ease-in-out;
            transition:opacity 150ms ease-in-out;
}

.mR li:hover>ul,.mR li:hover>.menuResponse,.mR li:hover>.menuResponse ol li {
	opacity:1;
	visibility:visible;
	display:block ! important/9;
}

.mR ul:after {
	content:"";
	clear:both;
	display:block;
}

.mR ul li {
	float:left;
    
	-webkit-transition:all 150ms ease-in-out;
	   -moz-transition:all 150ms ease-in-out;
        -ms-transition:all 150ms ease-in-out;
         -o-transition:all 150ms ease-in-out;
            transition:all 150ms ease-in-out;
}

.mR ul li a {
	display:block;
	padding:14px 20px 15px;
	color:#fff;
	font-weight:700;
	text-decoration:none;
}

.mR .arrow:after {
	content:"";
	float:right;
	text-align:right;
	width:0;
	height:0;
	display:block;
	border-left:3px solid rgba(0,0,0,0);
	border-right:3px solid rgba(0,0,0,0);
	border-top:3px solid #fff;
	top:9px;
	margin:0 0 0 5px;
	position:relative;
	border-left:3px solid transparent/9;
	border-right:3px solid transparent/9;
}

.mR ul li ul li .arrow:after {
	border-top:3px solid transparent;
	border-bottom:3px solid transparent;
	border-left:3px solid #bbb;
	margin:-2px 0 0 5px;
}

.mR i {
	font-size:14px;
	font-weight:400;
	font-style:normal;
	float:left;
	margin:4px 4px 0 -2px;
	line-height:14px;
	padding:0;
}

.mR .right {
	float:right;
}

.mR .right ul,.mR .right .menuResponse {
	right:0;
}

.mR ul ul {
	background:#fff;
	border:1px solid...