body
{
  background: #83bbfa;
  width: 98%;
  height: 100%;
  padding:0;
  margin:0.5em;
}

ul.nav
{
  list-style:none;
  width:28em;
  height:30em;
  margin:0 auto;
  padding-top:3em;
  padding-bottom:2em;
}

ul.nav li
{
  position:relative;
  float:left;
  margin:0;
}

ul.nav a
{
  text-decoration:none;
  outline:none;
  color:#b4e2ff;
  background-color: transparent;
  font-weight:bold;
  font-family:sans-serif;
}

ul.nav a:hover
{
  color:#5395f1;
  background-color: transparent;
  /*IE needs following line*/
  visibility:visible;
}

ul.nav b.top
{
  /*triangle with actual height border-bottom and actual width border-left + border-right*/
  /*for pentagon with corner up*/
  display:block;
  border-top:0;
  border-bottom:4em solid;
  border-left:5.1em solid #fff;
  border-right:5.1em solid #fff;
  height:0px;
  width:1px;
  margin:0;
  margin-top:-1em;
  padding:0;
}

ul.nav a>b.top
{ 
  margin-top:0;
}

ul.nav li.rev b.top
/*quadrilateral for pentagon with corner down*/
{
  border-top:0;
  border-bottom:6em solid;
  border-left:1.9em solid #fff;
  border-right:1.9em solid #fff;
  height:0px;
  width:6.4em;
}

ul.nav b.bottom
{
  /*quadrilateral for pentagon with corner up*/
  display:block;
  border-top:6em solid;
  border-bottom:0;
  border-left:2em solid #fff;
  border-right:2em solid #fff;
  height:1px;
  width:6.4em;
  margin:0;
  margin-bottom:-1em;
  padding:0;
}

ul.nav a>b.bottom
{ 
  margin-bottom:0;
}

ul.nav li.rev b.bottom
{
  /*triangle with actual height border-bottom and actual width border-left + border-right*/
  /*for pentagon with corner down*/
  border-top:4em solid;
  border-bottom:0;
  border-left:5em solid #fff;
  border-right:5em solid #fff;
  width:0px;
}

ul.nav>li.rev b.bottom,ul.nav>li.rev b.top,ul.nav>li b.top,ul.nav>li b.bottom
{
  /*IE doesn't support transparent borders*/
  border-color:transparent;
  border-top-color:inherit;
  border-bottom-color:inherit;
}

ul.nav span
{
  /*the letters in the pentagons*/
  position:absolute;
  top:5em;
  left:4.5em;
  color:red;
  background-color: transparent;
}

ul.nav a>span
{
  top:5em;
  left:4.5em;
}

ul.nav li.rev span
{
  position:absolute;
  top:4.5em;
  left:4.6em;
  color:red;
  background-color: transparent;
}

ul.nav li.rev a>span
{
  top:4em;
  left:4.5em;
}

ul.nav li.nav_a
{
  top:8.5em;
  left:7.5em;

}

ul.nav li.nav_b
{
  top:0em;
  left:4.5em;
}

ul.nav li.nav_c
{
  top:3em;
  left:19em;
}

ul.nav li.nav_d
{
  top:11em;
  left:-2.8em;
}

ul.nav li.nav_e
{
  top:-7.5em;
  left:-3.6em;
}

ul.nav li.nav_f
{
  top:-20.8em;
  left:-10em;
}

ul.nav>li.nav_f
{
  top:-20em;
  left:-10em;
}

ul.nav a:hover .hover
{
  /*show it*/
  visibility:visible;
}