<! DOCTYPE html>
<meta http-equiv= "Content-type" content= "text/html; Charset=utf-8 "/>
<title> Pure CSS navigation menu for hexagon layout </title>
<style>
. wrap{margin:100px;width:303px;}
. Nav{width:100px;height:58px;background: #339933;d isplay:inline-block;position:relative;line-height:58px; Text-align:center;color: #ffffff; font-size:14px;text-
decoration:none;float:left;margin-top:31px;margin-right:1px;}
. Nav s{width:0;height:0;display:block;overflow:hidden;position:absolute;border-left:50px dotted transparent; border-right:50px Dotted transparent;border-bottom:30px Solid
#339933; left:0px;top:-30px;}
. Nav b{width:0;height:0;display:block;overflow:hidden;position:absolute;border-left:50px dotted transparent; border-right:50px Dotted transparent;border-top:30px Solid
#339933; bottom:-30px;left:0px;}
. a0{margin-left:100px;}
. a1{margin-left:50px;}
. nav:hover{background: #8CBF26; color: #333333;}
. Nav:hover s{border-bottom-color: #8CBF26;}
. Nav:hover b{border-top-color: #8CBF26;}
</style>
<body>
<div class= "Wrap" >
<a class= "Nav a0" target= "_blank" href= "#" ><s></s> broadcast <b></b></a>
<a class= "Nav A1" target= "_blank" href= "#" ><s></s> broadcast <b></b></a>
<a class= "Nav A2" target= "_blank" href= "#" ><s></s> broadcast <b></b></a>
<a class= "nav A3" target= "_blank" href= "#" ><s></s> broadcast <b></b></a>
<a class= "nav A4" target= "_blank" href= "#" ><s></s> broadcast <b></b></a>
<a class= "nav a5" target= "_blank" href= "#" ><s></s> broadcast <b></b></a>
</div>
<div>http://www.999jiujiu.com/</div>
</body>
Pure CSS navigation menu for hexagon layout