<style>
ul.hex {padding:0; margin:150px auto; list-style:none; width:104px; height:60px; position:relative;}
ul.hex li a {display:block; width:104px; height:60px; position:absolute; left:0; top:0; z-index:100; text-align:center; text-decoration:none; font:normal 20px/60px 'Neucha', cursive; color:#fff;
text-shadow: rgba(0,0,0,0.8) 0px 2px 2px;
}
ul.hex li a:before {display:block; content:""; width:104px; height:60px; position:absolute; left:0; top:0; z-index:-1;
-webkit-transform: rotate(60deg);
-moz-transform: rotate(60deg);
-ms-transform: rotate(60deg);
-o-transform: rotate(60deg);
transform: rotate(60deg);
}
ul.hex li a:after {display:block; content:""; width:104px; height:60px; position:absolute; left:0; top:0; z-index:-1;
-webkit-transform: rotate(-60deg);
-moz-transform: rotate(-60deg);
-ms-transform: rotate(-60deg);
-o-transform: rotate(-60deg);
transform: rotate(-60deg);
}ul.hex li:nth-child(1) a,
ul.hex li:nth-child(1) a:before,
ul.hex li:nth-child(1) a:after {background:#c60;
background-image: -webkit-radial-gradient(circle cover, rgba(255,255,255,0.9), rgba(255,255,255,0) 65%, rgba(0,0,0,1) 68%, rgba(128,128,128,1) 75%, rgba(0,0,0,1) 95%);
background-image: -moz-radial-gradient(circle cover, rgba(255,255,255,0.9), rgba(255,255,255,0) 65%, rgba(0,0,0,1) 68%, rgba(128,128,128,1) 75%, rgba(0,0,0,1) 95%);
background-image: -ms-radial-gradient(circle cover, rgba(255,255,255,0.9), rgba(255,255,255,0) 65%, rgba(0,0,0,1) 68%, rgba(128,128,128,1) 75%, rgba(0,0,0,1) 95%);
background-image: -o-radial-gradient(circle cover, rgba(255,255,255,0.9), rgba(255,255,255,0) 65%, rgba(0,0,0,1) 68%, rgba(128,128,128,1) 75%, rgba(0,0,0,1) 95%);
background-image: radial-gradient(circle cover, rgba(255,255,255,0.9), rgba(255,255,255,0) 65%, rgba(0,0,0,1) 68%, rgba(128,128,128,1) 75%, rgba(0,0,0,1) 95%);
}
ul.hex li:not(:first-child) a,
ul.hex li:not(:first-child) a:before,
ul.hex li:not(:first-child) a:after {background-color:#c00;
background-image: -webkit-radial-gradient(circle cover, rgba(255,255,255,0.9), rgba(255,255,255,0) 65%, rgba(0,0,0,1) 68%, rgba(128,128,128,1) 75%, rgba(0,0,0,1) 95%);
background-image: -moz-radial-gradient(circle cover, rgba(255,255,255,0.9), rgba(255,255,255,0) 65%, rgba(0,0,0,1) 68%, rgba(128,128,128,1) 75%, rgba(0,0,0,1) 95%);
background-image: -ms-radial-gradient(circle cover, rgba(255,255,255,0.9), rgba(255,255,255,0) 65%, rgba(0,0,0,1) 68%, rgba(128,128,128,1) 75%, rgba(0,0,0,1) 95%);
background-image: -o-radial-gradient(circle cover, rgba(255,255,255,0.9), rgba(255,255,255,0) 65%, rgba(0,0,0,1) 68%, rgba(128,128,128,1) 75%, rgba(0,0,0,1) 95%);
background-image: radial-gradient(circle cover, rgba(255,255,255,0.9), rgba(255,255,255,0) 65%, rgba(0,0,0,1) 68%, rgba(128,128,128,1) 75%, rgba(0,0,0,1) 95%);
}
ul.hex li:nth-child(1) a:hover,
ul.hex li:nth-child(1) a:hover:before,
ul.hex li:nth-child(1) a:hover:after {background-color:#fa0; color:#000;}
ul.hex li:not(:first-child) a:hover,
ul.hex li:not(:first-child) a:hover:before,
ul.hex li:not(:first-child) a:hover:after {background-color:#0a0; color:#000;}
ul.hex li {width:104px; height:60px; position:absolute; left:106px; top:0;
-webkit-transform-origin: -54px 30px;
-moz-transform-origin: -54px 30px;
-ms-transform-origin: -54px 30px;
-o-transform-origin: -54px 30px;
transform-origin: -54px 30px;
}
ul.hex li:nth-child(1) {left:0;}
ul.hex li:nth-child(3) {
-webkit-transform: rotate(60deg);
-moz-transform: rotate(60deg);
-ms-transform: rotate(60deg);
-o-transform: rotate(60deg);
transform: rotate(60deg);
}
ul.hex li:nth-child(3) a {
-webkit-transform: rotate(-60deg);
-moz-transform: rotate(-60deg);
-ms-transform: rotate(-60deg);
-o-transform: rotate(-60deg);
transform: rotate(-60deg);
}
ul.hex li:nth-child(4) {
-webkit-transform: rotate(120deg);
-moz-transform: rotate(120deg);
-ms-transform: rotate(120deg);
-o-transform: rotate(120deg);
transform: rotate(120deg);
}
ul.hex li:nth-child(4) a {
-webkit-transform: rotate(-120deg);
-moz-transform: rotate(-120deg);
-ms-transform: rotate(-120deg);
-o-transform: rotate(-120deg);
transform: rotate(-120deg);
}
ul.hex li:nth-child(5) {
-webkit-transform: rotate(180deg);
-moz-transform: rotate(180deg);
-ms-transform: rotate(180deg);
-o-transform: rotate(180deg);
transform: rotate(180deg);
}
ul.hex li:nth-child(5) a {
-webkit-transform: rotate(-180deg);
-moz-transform: rotate(-180deg);
-ms-transform: rotate(-180deg);
-o-transform: rotate(-180deg);
transform: rotate(-180deg);
}
ul.hex li:nth-child(6) {
-webkit-transform: rotate(240deg);
-moz-transform: rotate(240deg);
-ms-transform: rotate(240deg);
-o-transform: rotate(240deg);
transform: rotate(240deg);
}
ul.hex li:nth-child(6) a {
-webkit-transform: rotate(-240deg);
-moz-transform: rotate(-240deg);
-ms-transform: rotate(-240deg);
-o-transform: rotate(-240deg);
transform: rotate(-240deg);
}
ul.hex li:nth-child(7) {
-webkit-transform: rotate(300deg);
-moz-transform: rotate(300deg);
-ms-transform: rotate(300deg);
-o-transform: rotate(300deg);
transform: rotate(300deg);
}
ul.hex li:nth-child(7) a {
-webkit-transform: rotate(-300deg);
-moz-transform: rotate(-300deg);
-ms-transform: rotate(-300deg);
-o-transform: rotate(-300deg);
transform: rotate(-300deg);
}
</style>
<ul class="hex">
<li><a href="#">Menu</a></li>
<li><a href="#">Menu</a></li>
<li><a href="#">Menu</a></li>
<li><a href="#">Menu</a></li>
<li><a href="#">Menu</a></li>
<li><a href="#">Menu</a></li>
<li><a href="#">Menu</a></li>
</ul>