div.nav
{
  /*simple div for positioning the <ul>*/
  float:left;
  width:44em;
  height:7.5em;
  margin-bottom:1em;
}

ul.nav
{
  position:absolute;
  /*top/left depends on the margin/padding of the parents (eg body): padding-top + margin-top + 1.5em*/
  top:2em;
  left:2em;
  margin:0 auto;
  padding:0;
  list-style:none;
}

ul.nav li
{
  position:absolute;
  margin:0;
  padding:0;
  width:2.5em;
}

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:1em solid;
  border-left:1.25em solid #fff;
  border-right:1.25em solid #fff;
  height:0px;
  width:1px;
  margin:0;
  margin-top:-1.25em;
  padding:0;
}

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

ul.nav b.bottom
{
  /*quadrilateral for pentagon with corner up*/
  display:block;
  border-top:1.5em solid;
  border-bottom:0;
  border-left:0.5em solid #fff;
  border-right:0.5em solid #fff;
  height:1px;
  width:1.6em;
  margin:0;
  margin-bottom:-1.25em;
  padding: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:1em solid;
  border-bottom:0;
  border-left:1.25em solid #fff;
  border-right:1.4em 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:0.6em;
  left:0.8em;
  color:red;
  background-color: transparent;
}

ul.nav a>span
{
  top:-0.5em;
  left:0.8em;
}

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

ul.nav li.rev a>span
{
  top:-0.8em;
  left:1.0em;
}

ul.nav li.nav_a
{
  top:2em;
  left:2.5em;
}

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

ul.nav li.nav_c
{
  top:3.2em;
  left:5em;
}

ul.nav li.nav_d
{
  top:4.9em;
  left:2.5em;
}

ul.nav li.nav_e
{
  top:3.2em;
  left:0em;
}

ul.nav li.nav_f
{
  top:0em;
  left:0.9em;
}

ul.nav strong
{ 
  /*every box looks like this*/
  position:absolute;
  border:#828282 2px solid;
  margin:0% 10% 10% 0%;
  height:1.5em;
  text-align:center;
  outline:none;
  z-index:2;
  font-weight: normal;
  font-family:sans-serif;
  color:black;
  background-color: transparent;
 }

ul.nav strong:first-letter
{ 
  /*the first letter in <strong>*/
  font-weight:bold;
  color:red;
  background-color: transparent;
}

ul.nav strong.hover
{
  /*show this below the other strong on mousover*/
  border:#d0d0d0 2px solid;
  color: inherit;
  background:#5395f1;
  visibility:hidden;
  z-index:1;
}

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

li.nav_a strong
{
  /*this is the location of the a box for IE*/
  top:0em;
  left:7em;
  width:5em;
}

ul>li.nav_a strong
{
  /*this is the location of the a box*/
  top:-0.8em;
}

li.nav_b strong
{
  top:2em;
  left:11em;
  width:5em;
}

ul>li.nav_b strong
{
  top:1.2em;
}

li.nav_c strong
{
  top:-1.2em;
  left:15.7em;
  width:5em;
}

ul>li.nav_c strong
{
  top:-2em;
}

li.nav_d strong
{
  top:-2.9em;
  left:23.8em;
  width:5em;
}

ul>li.nav_d strong
{
  top:-3.7em;
}

li.nav_e strong
{
  top:-1.2em;
  left:31.8em;
  width:5em;
}

ul>li.nav_e strong
{
  top:-2em;
}

li.nav_f strong
{
  top:2em;
  left:36.4em;
  width:5em;
}

ul>li.nav_f strong
{
  top:1.2em;
}