. Colorful Tango Demo .

Read the Article

<!-- 
Let's dance tango. CSS3 Animated Responsive Navigation Menu 
Article URL:
-->

<!--Using Google Font-->

<link href='http://fonts.googleapis.com/css?family=Montserrat+Alternates:400,700' rel='stylesheet' type='text/css'>
<link href='http://fonts.googleapis.com/css?family=Nova+Mono' rel='stylesheet' type='text/css'>

<!--HTML-->

<nav>
    <ul>
        <li><a href="#">Emotional Image <span>When Emotional Image overlay on reality surrounding, concrete idea is born, which create a basis for Visual Identity of the company.</span></a></li>
        <li><a href="#">Graphic Design <span>After the Emotional Image is created, we can start the design of this image on paper. Let's review the following example.</span></a></li>
        <li><a href="#">Business Card <span>Now, as an example let's create a logo and business card for A.B. Obvious that both logo and business card will contain shapes that designed above.</span></a></li>
        <li><a href="#">Web Design <span class="oops">Oops!</span> <span>Development of Web Design is conducted according to the same principles of composition, as in Graphic Design.</span></a></li>
    </ul>
</nav>

<style type="text/css">
body {
	background:#FFF;
}
* {
	padding: 0;
	margin: 0;
	/*Paul Irish's advice will help us size things easily with percentages even though we'll be using borders.*/ 
	-webkit-box-sizing: border-box;
	   -moz-box-sizing: border-box;
			box-sizing: border-box;
}
nav {
	width: 95%; 
	max-width: 800px;
	min-width: 360px;
	margin: 100px auto;
}
nav ul {
	list-style: none;
	overflow: hidden;
}
nav li a {
	font-family: 'Montserrat Alternates', sans-serif;
	font-size: 30px;
    color: rgb(9, 8, 8);
    text-shadow: 1px 1px 1px rgba(66, 66, 66, 0.6);
	text-align: center;
	text-decoration: none;
	display: block;
	float: left;
	padding: 10px 0 10px 0;
	width: 50%;
	-webkit-transition: all 0.5s ease;
    -moz-transition: all 0.5s ease;
    -o-transition: all 0.5s ease;
    transition: all 0.5s ease;
}
nav li a span {
	font-family: 'Nova Mono', cursive;
	font-size: 10px;
	text-transform: uppercase;
	text-shadow: none;
	display: block;
	padding: 7px;
	height: 50px;
	border-top: 1px dotted rgba(253, 253, 253, 0.5);
}
nav li a span.oops {
	position: absolute;
	left: 70%;
	top: 50%;
	font-size: 21px;
	font-weight: 900;
	color: #DD0808;
	text-transform: none;
	display: none;
	border-top: none;
}
nav li a:hover span.oops {
	display: inline-block;
	-webkit-transform: scale(3) rotate(160deg);
	-moz-transform: scale(3) rotate(160deg);
	-o-transform: scale(3) rotate(160deg);
	transform: scale(3) rotate(160deg);
}
nav li:nth-child(1) a {
	border-right: 1px dotted #fff;
    border-bottom: 1px dotted #fff;
	background: rgba(122, 15, 173, 0.8);
}
nav li:nth-child(2) a {
	border-bottom: 1px dotted #fff;
	background: rgba(18, 17, 19, 0.6);
}
nav li:nth-child(3) a {
	border-right: 1px dotted #fff;
	background: rgba(223, 38, 13, 0.9);
}
nav li:nth-child(4) a {
	position: relative;
	background: rgba(9, 8, 8, 0.8);
}
nav li a:hover {
	color:#fff;
}
nav li:nth-child(1) a:hover {
	background: rgba(122, 15, 173, 1);
	-webkit-transform: scale(0.7) rotate(360deg);
	-moz-transform: scale(0.7) rotate(360deg);
	-o-transform: scale(0.7) rotate(360deg);
	transform: scale(0.7) rotate(360deg);
}
nav li:nth-child(2) a:hover {
	background: rgba(18, 17, 19, 1);
	-webkit-transform: scale(0.8) rotate(720deg);
	-moz-transform: scale(0.8) rotate(720deg);
	-o-transform: scale(0.8) rotate(720deg);
	transform: scale(0.8) rotate(720deg);
}
nav li:nth-child(3) a:hover {
	background: rgba(223, 38, 13, 1);
	-webkit-transform: scale(0.8) rotate(360deg);
	-moz-transform: scale(0.8) rotate(360deg);
	-o-transform: scale(0.8) rotate(360deg);
	transform: scale(0.8) rotate(360deg);
}
nav li:nth-child(4) a:hover {
	background: rgba(9, 8, 8, 0.5);
	-webkit-transform: scale(0.8) rotate(180deg);
	-moz-transform: scale(0.8) rotate(180deg);
	-o-transform: scale(0.8) rotate(180deg);
	transform: scale(0.8) rotate(180deg);
}
@media only screen and (max-width : 700px){
	nav li a {
    font-size: 24px;
	}
    nav li a span {
		height: 70px;
	}
}
@media only screen and (max-width : 535px){
	nav li a {
		width: 100%;
		border-right: none !important;
		border-bottom: 1px dotted #fff;
	}
	nav li:last-child a {
		border-bottom: none;
	}
	nav li a span {
			height: 40px;
		}
}
</style>