CodePen Embed - Accessibility menu

<div class="container">
  <nav id="nav" role="navigation">
    <ul class="nav-menu">
      <li class="nav-item">
        <a tabindex="1" href="#"><img src="https://www.petplan.co.uk/assets-new/images/core/home-icon.png" alt="Home"></a>
      </li>


      <li class="nav-item selected">
        <a tabindex="2" href="#" aria-haspopup="true">Get a Quote <b>&dtrif;</b></a>
        <div class="sub-nav">
          <ul class="sub-nav-group">
            <li><a href="#">Quote for my Dog</a></li>
            <li><a href="#">Quote for my Cat</a></li>
            <li><a href="#">Quote for my Rabbit</a></li>
            <li><a href="#">Quote for my Horse</a></li>
            <li><a href="#">Quote for Exotic Pet</a></li>
            <li><a href="#">Quote for my Pet Business</a></li>
            <li><a href="#">Retrieve my Quote</a></li>
          </ul>
        </div>
      </li>


      <li class="nav-item">
        <a tabindex="3" href="#" aria-haspopup="true">Our Policies <b>&dtrif;</b></a>

        <div class="sub-nav">
          <ul class="sub-nav-group">
            <li><a href="#">Dog Insurance</a></li>
            <li><a href="#">Puppy Insurance</a></li>
            <li><a href="#">Cat &amp; Kitten Insurance</a></li>
            <li><a href="#">Rabbit Insurance</a></li>
            <li><a href="#">Multi Pet Discount</a></li>
            <li><a href="#">Horse Insurance</a></li>
            <li><a href="#">Exotic Insurance</a></li>
          </ul>


          <ul class="sub-nav-group">
            <li><a href="#">Pet Business Insurance</a></li>
            <li><a href="#">Benefits of Insurance</a></li>
            <li><a href="#">Lifetime and time limited cover</a></li>
          </ul>
        </div>
      </li>


      <li class="nav-item">
        <a tabindex="4" href="#" aria-haspopup="true">Pet Advice <b>&dtrif;</b></a>

        <div class="sub-nav" style="left:-250px">
          <ul class="sub-nav-group">
            <li class="header"><a href="#"><h4>Pet Health</h4></a></li>
            <li><a href="#">Dog Health</a></li>
            <li><a href="#">Cat Health</a></li>
            <li><a href="#">Rabbit Illness</a></li>
            <li><a href="#">Horse Illness</a></li>
            <li><a href="#">Vet Clinics</a></li>
          </ul>


          <ul class="sub-nav-group" style="min-width:280px;">
            <li class="header"><a href="#"><h4>Pet owner guides</h4></a></li>
            <li><a href="#">Prepare your rabbit for winter</a></li>
            <li><a href="#">Rabbit getting his five a day?</a></li>
            <li><a href="#">Summer Safety</a></li>
            <li><a href="#">Dog and Cat life cycles</a></li>
            <li><a href="#">Animal Welfare Act</a></li>
            <li><a href="#">Ear Health</a></li>
            <li><a href="#">Microchip Dog Law Info</a></li>
          </ul>


          <ul class="sub-nav-group">
            <li><a href="#">Find a Pet Service</a></li>
            <li><a href="#">Pet IQ</a></li>
            <li><a href="#">Blog</a></li>
          </ul>
        </div>
      </li>


      <li class="nav-item">
        <a tabindex="5" href="#" aria-haspopup="true">Existing Customers <b>&dtrif;</b></a>

        <div class="sub-nav" style="left:-469px">
          <ul class="sub-nav-group">
            <li class="header"><a href="#"><h4>My Policy</h4></a></li>
            <li><a href="#">Update your details</a></li>
            <li><a href="#">Paying by Direct Debit</a></li>
            <li><a href="#">Lost your policy documents?</a></li>
            <li><a href="#">Add Nominated Person</a></li>
            <li><a href="#">Send a Document</a></li>
            <li><a href="#">Policy FAQs</a></li>
          </ul>


          <ul class="sub-nav-group">
            <li class="header"><a href="#"><h4>Claims</h4></a></li>
            <li><a href="#">Make a Claim</a></li>
            <li><a href="#">Track My Claim</a></li>
            <li><a href="#">Request Claims History</a></li>
            <li><a href="#">Claims FAQs</a></li>
            <li><a href="#">Send a Document</a></li>
          </ul>


          <ul class="sub-nav-group">
            <li class="header"><a href="#"><h4>Petplan Together</h4></a></li>
            <li><a href="#">Puppy</a></li>
            <li><a href="#">Dog</a></li>
            <li><a href="#">Senior Dog</a></li>
            <li><a href="#">Kitten</a></li>
            <li><a href="#">Cat</a></li>
            <li><a href="#">Senior Cat</a></li>
            <li><a href="#">Rabbit</a></li>
          </ul>


          <ul class="sub-nav-group">
            <li class="header"><a href="#"><h4>PetPeople Magazine</h4></a></li>
            <li><a href="#">PetPeople archive</a></li>
            <li><a href="#">Missed the last issue?</a></li>
            <li><a href="#">Featured articles</a></li>
            <li><a href="#">Tell Us Your Story</a></li>
            <li><a href="#">Customer Stories</a></li>
          </ul>


          <ul class="sub-nav-group">
            <li><a href="#">My Offers</a></li>
            <li><a href="#">Recommend a Friend</a></li>
          </ul>
        </div>
      </li>


      <li class="nav-item">
        <a tabindex="6" href="#" aria-haspopup="true">Claims <b>&dtrif;</b></a>

        <div class="sub-nav">
          <ul class="sub-nav-group">
            <li><a href="#">Make a Claim</a></li>
            <li><a href="#">Track My Claim</a></li>
            <li><a href="#">Request Claims History</a></li>
            <li><a href="#">Claims FAQs</a></li>
            <li><a href="#">Customer Stories</a></li>
            <li><a href="#">Send a Document</a></li>
          </ul>
        </div>
      </li>


      <li class="nav-item">
        <a tabindex="7" href="#" aria-haspopup="true">About us <b>&dtrif;</b></a>

        <div class="sub-nav align-right">
          <ul class="sub-nav-group">
            <li><a href="#">What Makes Us Different?</a></li>
            <li><a href="#">Our work with Charities</a></li>
            <li><a href="#">Our work with Vets</a></li>
            <li><a href="#">Working With Breeders</a></li>
            <li><a href="#">Customer Reviews</a></li>
            <li><a href="#">Awards</a></li>
            <li><a href="#">Careers</a></li>
          </ul>
        </div>
      </li>


      <li class="nav-item">
        <a tabindex="8" href="#" aria-haspopup="true">Help <b>&dtrif;</b></a>

        <div class="sub-nav align-right">
          <ul class="sub-nav-group">
            <li><a href="#">Contact us</a></li>
            <li><a href="#">FAQs</a></li>
            <li><a href="#">Complaints</a></li>
            <li><a href="#">Ask Us a Question</a></li>
            <li><a href="#">Send a Document</a></li>
          </ul>
        </div>
      </li>
    </ul>
  </nav>
</div>

body {
  padding:50px;
  font-size:15px;

  font-family:sans-serif;
  background:#EEE;
}
.container {
  display:table;
  margin:auto;
  min-height:700px;

  border:1px solid pink;
}

nav#nav { 
  position: relative;
  z-index: 2;

  width:982px;
  margin:0 auto;
  
  * { box-sizing:border-box; }
  h4 { margin:0; }
  
  a { 
    display:block; 
    padding:3px 0;

    text-decoration:none;

    color:#002596;
    font-weight:200;
  }

  .nav-menu {
    display:table;

    width:100%;
    height: 3.75em;

    padding:0;
    margin:0;
  }

  .nav-item {
    position: relative;

    display:table-cell;
    vertical-align:middle;
    
    color:#002596;

    height: 100%;

    background:#c7c7c7;
    transition: background 0.2s ease;

    padding:0;
    border-left: 1px solid #FFF;
    border-right: 1px solid #A7A7A7;

    &:first-child { border-left:none; }
    &:last-child { border-right:none; }

    &.selected { background:white; }

    > a {
      font-size:16px;

      text-align:center;
      font-weight:600;
      padding:10px;
    }

    b { display:inline-block; }
  }

  .nav-item:hover { background:white; }


  .sub-nav {
    position: absolute;
    top: 100%;
    left:0;

    &.align-right {
      left:auto;
      right:0;
    }

    display: none;
    padding:10px;

    background:#FFF;

  }

  .sub-nav-group {
    display:table-cell;

    padding-left:20px;
    min-width:192px;
    
    text-align:left;
    
    li {
      position:relative;
      list-style:none;

      &:before { 
        content:"\025B8";
        position:absolute;
        left:-12px;
        line-height:23px;
        vertical-align:middle;
      }
    }
  }

  .sub-nav.open { display:table; }

  li.header { margin-bottom:5px; }
  li.header ~ li {
    // font-size:12px;
    &:before {
      content:'';
    }
  }
}

View Compiled

$("nav:first").accessibleMegaMenu({
  uuidPrefix: "accessible-megamenu",
  menuClass: "nav-menu",
  topNavItemClass: "nav-item",
  panelClass: "sub-nav",
  panelGroupClass: "sub-nav-group",

  hoverClass: "hover",
  focusClass: "focus",
  openClass: "open"
});

This Pen is owned by Lee Kiernan on CodePen.

See more by @leekiernan on CodePen

External CSS

This Pen doesn't use any external CSS resources.

External CSS

External JavaScript