<nav class="one">
<ul>
<li><a href="#">Home</a></li>
<li><a href="#">About</a></li>
<li><a href="#">Shop</a></li>
<li><a href="#">Contact</a></li>
</ul>
</nav>
<nav class="two">
<ul>
<li><a href="#">Home</a></li>
<li><a href="#">About</a></li>
<li><a href="#">Shop</a></li>
<li><a href="#">Contact</a></li>
</ul>
</nav>
* {
-webkit-box-sizing: border-box;
-moz-box-sizing: border-box;
-ms-box-sizing: border-box;
box-sizing: border-box;
}
body {
background: #222;
}
.one {
background: #ccc;
}
.two {
background: tomato;
width: 25%;
display: block;
margin: 0 auto;
text-align: center;
}
.one ul {
text-align: center;
}
.one ul, .two ul {
list-style: none;
}
.one ul li {
display: inline;
}
.one ul li a, .two ul li a {
color: #222;
text-decoration: none;
text-transform: none;
text-transform: uppercase;
font-weight: bold;
}
.one ul li a {
padding: 40px;
display: inline-block;
}
.one ul li a:hover {
background: #222;
color: #ccc;
-webkit-transform: scale(1.2, 1.2);
-moz-transform: scale(1.2, 1.2);
-o-transform: scale(1.2, 1.2);
-ms-transform: scale(1.2, 1.2);
transform: scale(1.2, 1.2);
text-shadow: 0 0 10px #ccc;
}
.two ul {
padding: 0;
}
.two ul li a {
padding: 15px;
display: block;
}
.two ul li a:hover {
background: #222;
color: tomato;
-webkit-transform: scale(1.2, 1.2);
-moz-transform: scale(1.2, 1.2);
-o-transform: scale(1.2, 1.2);
-ms-transform: scale(1.2, 1.2);
transform: scale(1.2, 1.2);
text-shadow: 0 0 10px tomato;
}
This Pen doesn't use any external CSS resources.