<body>
  <div id="frame">
    <nav>
      <ul id="menu">
        <li><span id="current"><a href="/">BSHG Homepage</a></span></li>
        <li><a class="menhed">Burton at War</a>
          <ul>
            <li><a href="tankramp.php">The Tank Ramp</a></li>
            <li><a href="location.php">Location</a></li>
            <li><a href="thesite.php">The Site</a></li>
            <li><a href="rollofhonour.php">Roll of Honour</a></li>
            <li><a href="canadians.php">The Canadians</a></li>
          </ul>
        </li>
        <li><a class="menhed">Burton's Heritage</a>
          <ul>
            <li><a href="shipping.php">Shipping</a></li>
            <li><a href="brickworks.php">Brickworks</a></li>
            <li><a href="artefacts.php">Artefacts</a></li>
            <li><a href="burtonwmc.php">Burton WMC</a></li>
            <li><a href="history_cal.php">History Calendar</a></li>
          </ul>
        </li>
        <li><a class="menhed">BSHG Events</a>
          <ul>
            <li><a href="calendar.php">Events Calendar</a></li>
            <li><a href="beer-fest.php">Burton in Beer</a></li>
            <li><a href="raftrace.php">Raft Race</a></li>
            <li><a href="past-events.php">Past Events</a></li>
          </ul>
        </li>
        <li><a class="menhed">Interviews</a>
          <ul>
            <li><a href="john_porteous.php">John Porteous</a></li>
            <li><a href="sally_robinson.php">Sally Robinson</a></li>
            <li><a href="dave_gibb.php">Dave Gibb</a></li>
            <li><a href="edna_lawn.php">Edna Lawn</a></li>
          </ul>
        </li>
        <li><a class="menhed">About Us</a>
          <ul>
            <li><a href="about.php">About BSHG</a></li>
            <li><a href="contact.php">Contact Us</a></li>
            <li><a href="ourwork.php">Our Work</a></li>
            <li><a href="media.php">In The Media</a></li>
            <li><a href="links.php">Thanks/Links</a></li>
            <li><a href="sitemap.php">Sitemap</a></li>
          </ul>
        </li>
      </ul>
    </nav>
    <p>Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo consequat. Duis aute irure
      dolor in reprehenderit in voluptate velit esse cillum dolore eu fugiat nulla pariatur. Excepteur sint occaecat cupidatat non proident, sunt in culpa qui officia deserunt mollit anim id est laborum.</p>
    <p>Lorem ipsum dolor sit amet, consectetur adipiscing elit, sed do eiusmod tempor incididunt ut labore et dolore magna aliqua. Ut enim ad minim veniam, quis nostrud exercitation ullamco laboris nisi ut aliquip ex ea commodo consequat. Duis aute irure
      dolor in reprehenderit in voluptate velit esse cillum dolore eu fugiat nulla pariatur. Excepteur sint occaecat cupidatat non proident, sunt in culpa qui officia deserunt mollit anim id est laborum.</p>
  </div>
</body>
body {
  background: #666;
}
#frame {
  background: #fff;
  max-width: 900px;
  margin: 0 auto;
}
#menu {
  position: relative;
  padding: 0;
  margin: 0;
}
#menu a {
  display: block;
}
#menu ul {
  /* all lists */
  padding: 0;
  margin: 0;
  list-style: none;
  z-index: 99;
  float: left;
}
#menu li {
  /* all list items */
  box-sizing: border-box;
  border: solid 2px;
  border-color: #d3e8a3 #56aa1c #009e0f #aadd6d;
  float: left;
  position: relative;
  padding: 0;
  margin: 0;
  list-style: none;
  width: 16.66%;
  height: auto;
  background: #5bbf21;
  text-align: center;
}

#menu li ul {
  /* second-level lists */
  position: absolute;
  left: 0;
  top: 100%;
  width: 100%;
  display: none;
  z-index: 100;
}
#menu li:hover ul,
#menu li:focus ul,
#menu li ul:focus-within {
  /* lists nested under hovered list items */
  display: block;
}
#menu a:link,
.menhed {
  padding: 0.2em 0.1em;
  color: #fff;
  width: auto;
  height: 100%;
  text-decoration: none;
  font-weight: bold;
  font-family: "Trebuchet MS", sans-serif;
  text-shadow: 1px 1px 0 #000;
  letter-spacing: -0.08em;
  font-size: 1em;
}
#menu li ul li {
  width: 100%;
}
#menu li ul a {
  background: #391;
}
#menu a:visited {
  color: #ff9;
  text-decoration: none;
  font-weight: bold;
}
#menu a:hover, #menu a:focus {
  color: #5bbf21;
  background: #fff;
  text-shadow: 1px 1px 0 #ccc;
  text-decoration: none;
  -webkit-transition: all 0.3s ease-in-out;
  -moz-transition: all 0.3s ease-in-out;
  -o-transition: all 0.3s ease-in-out;
  -ms-transition: all 0.3s ease-in-out;
  transition: all 0.3s ease-in-out;
}

#menu a:active {
  color: #d00;
  text-decoration: none;
  -webkit-transition: all 0.1s ease-in-out;
  -moz-transition: all 0.1s ease-in-out;
  -o-transition: all 0.1s ease-in-out;
  -ms-transition: all 0.1s ease-in-out;
  transition: all 0.1s ease-in-out;
}
Run Pen

External CSS

This Pen doesn't use any external CSS resources.

External JavaScript

This Pen doesn't use any external JavaScript resources.