CodePen

HTML

            
              <div id="back">
  Hex Menu
</div>
<div id="content">
  <div class="hex hex-row" >
    <div class="sub-hex hex">
      <div class="sub-hex hex"></div>
      <div class="sub-hex hex bottom">
        <div class="sub-hex hex">
          <div class="sub-hex hex top"></div>
          <div class="sub-hex hex"></div>
          <div class="sub-hex hex bottom"></div>
        </div>
        <div class="sub-hex hex bottom"></div>
      </div>
    </div>
  </div>
  <div class="hex hex-row even" >
    <div class="sub-hex hex"></div>
  </div>
  <div class="hex hex-row"></div>
</div>
            
          
!

↑ Insert the most common viewport meta tag

CSS

            
              body{
  background-color:#2e2e2e;
  width:100%;
}
#back{
  position:absolute;
  z-index:-10;
  color:#d4d4d4;
  width:150px;
  border-radius:10px;
  background-color:#4e4e4e;
  height:40px;
  left:120px;
  top:250px;
  text-align:center;
  font-family:consolas, monospace, sans-serif;
  font-size:20px;
  padding-top:10px;
  transition:all 0.5s linear;
}
.hex:before{
  content: " ";
  width: 0; height: 0;
  border-bottom: 30px solid #6c6;
  border-left: 52px solid transparent;
  border-right: 52px solid transparent;
  position:absolute;
  top: -30px;
  transition: all .3s ease;
  left:0px;
}
.hex{
  float: left;
  margin-left: -3px;
  margin-top: 33px;
  width: 104px;
  height: 60px;
  background-color:#6c6;
  position:relative;
  transition: all .3s ease;
  opacity: 0.5;
}
.hex:after{
  content: " ";
  width: 0;
  position: absolute;
  bottom: -30px;
  border-top: 30px solid #6c6;
  border-left: 52px solid transparent;
  border-right: 52px solid transparent;
  transition: all .3s ease;
  left:0px;
}
.hex-row {
    clear: left;
}
.hex-row.even {
    margin-left: 51px;
}
.hex:hover > .sub-hex{
  opacity:1;
  visibility:visible;
}
.hex:hover > .sub-hex:hover{
  opacity:1;
  visibility:visible;
}
.sub-hex{
  position:absolute;
  left:110px;
  top:0px;
  margin-top:0px;
  opacity:0;
  visibility:hidden;
}
.sub-hex.bottom{
  left:57px;
  top:93px;
}
.sub-hex.top{
  left:56px;
  top:-93px;
}
.hex:hover{
  /*background-color:#66e;*/
  opacity:1;
}
.hex:hover:after{
  /*border-top-color:#66e;*/
}
.hex:hover:before{
  /*border-bottom-color:#66e;*/
}
.hex:hover > .hex{
  opacity:0.5;
}
body:hover > #back{
  opacity:0;
}
            
          
!
? ?
? ?
Must be a valid URL.
+ add another resource
via CSS Lint

JS

            
              
            
          
!
Must be a valid URL.
+ add another resource
via JS Hint
Loading ..................