A Pen by Eric Tjossem.

index.html

<nav class="horizontal-nav" role="navigation">
  <ul>
    <li>Go Here</li>
    <li>Go There</li>
    <li>Go Elsewhere</li>
  </ul>
</nav>

<h1>Header One</h1>

<div class="container">
  <p>Lorem ipsum dolor sit amet, nonumy fierent neglegentur mea no. Labore ancillae incorrupte cu vel, iusto antiopam euripidis ex usu, nam debet saperet necessitatibus ad. Ne quo quem mutat solum, ei viris salutatus constituam vel. Sint iisque invidunt cum no, albucius phaedrum contentiones usu ex. Eu sea petentium accommodare. Vis ad malis aliquando dissentiunt, ius cu eros discere, at eos doctus posidonium. No graece salutandi vel, vis habeo nominavi conclusionemque ea, ut usu sale moderatius.
  </p>
  <p>
Impedit persequeris has ne, id scripta bonorum fabellas eum. Ea blandit legendos mea. Cum mutat nostro doctus te, mei commodo appareat splendide cu. His malis blandit mandamus eu, adipisci platonem corrumpit pro et. Ad sint eirmod indoctum mel.
  </p>
  <p>
Eleifend iracundia ullamcorper at vis, duo ferri dissentias ea. Omittam platonem prodesset mea an, sed ex aperiri tincidunt. Pri ut velit dolorum, ius cu veri gubergren signiferumque. Ut oporteat constituam eum. Suas everti scribentur ea eos.
  </p>
  <p>
Admodum hendrerit ad est, te enim eripuit mea. Te esse commodo consetetur sed, omnes facete pro eu. In usu omnis fuisset disputationi. Ex nam minimum accusam insolens. Id sit commodo inciderint, qui ludus tamquam cu.
  </p>
  <p>
Et eam consul perfecto adolescens, vis justo nullam debitis ne. No mea consequat intellegat, id torquatos definitiones has, mundi maiorum pro id. Mei ea errem periculis. Ne duo quis labores, no quodsi expetendis sententiae nec. Id eos ipsum doming regione, albucius facilisis usu ad. Libris nostrum accommodare mel ea, homero maiorum epicuri sea ut.
  </p>
  <p>
Dicit sapientem hendrerit an per, in quas omnes maiestatis eos, sed malis percipit consectetuer te. Ius te nibh eruditi tibique. His et omnis singulis legendos, et ullum ancillae vix. Malis democritum an vel. Nec epicurei posidonium eu, ea percipitur scripserit ius. Quando doctus eu per.
  </p>
  <p>
Ea sea idque blandit legendos. Ad mel eirmod reformidans. Has detraxit percipitur te, unum cetero denique quo no. Quod diceret veritus nec ex. Dico omnesque copiosae ei sea. Sale fastidii est et, no cum liber propriae definitionem, eu vel aliquam placerat. Dico similique pri in, vide delicata ad eam.
  </p>
  <p>
Vis in dicat accumsan, at detracto appetere constituam his. Apeirian liberavisse intellegebat ne qui, at vim epicurei theophrastus. Wow you have an eye for details, ad pro dolor tantas. Ne mei mazim putant. Dicat detracto legendos quo ea, sea ut choro adipisci.
  </p>
  <p>
In detraxit facilisis mel, audire splendide cum ex. In nullam ridens suscipit has, in vel assum denique. Usu utroque fastidii hendrerit et, unum harum ei eam, meis corrumpit no eam. Voluptaria elaboraret sea ut, eum prima dicta inimicus id. Nec eu movet choro affert.
  </p>
  <p>
Ut ius augue impedit delicata, an eos insolens mediocrem appellantur, meliore graecis eos an. Te dicta graecis vel. Ius in tale animal molestiae. Dicant aliquip no pro. Eu mutat simul latine vim, id vix nostro dolores suscipiantur. Sanctus laboramus ex pro, et mea odio falli. Vel ut vide partem numquam.
  </p>
  
</div>

Static-positioned-horizontal-nav-with-z-Index.markdown

Static-positioned horizontal nav with z-Index

Combination between the absolute positioning and the static approach to horizontal navigation - the best of both worlds.

Use the standard CSS rule for the element itself. Use the :after (absolute) CSS rule to apply z-index, shadow effects, etc.

A Pen by Eric Tjossem on CodePen.

License.

style.css

.horizontal-nav {
  background-color: #000;
  overflow: hidden;
}

.horizontal-nav:after {
  content: " ";
  position: absolute;
  right: 0;
  left: 0;
  z-index: 100;
  border-bottom: 4px solid rgba(0, 0, 0, 0.2);
}

  .horizontal-nav ul {
    list-style-type: none;
    overflow: hidden;
    padding: 0;
  }

  .horizontal-nav ul li {
    width: 33%;
    float: left;
    color: #FFF;
    text-align: center;
    padding: 18px 0 18px 0;
    cursor: pointer;
  }

  .horizontal-nav ul li:hover {
    background-color: #3a3a3a;
  }
  
  .horizontal-nav ul li:active {
    background-color: #4682B4;
  }

h1 {
  margin: 0;
  background-color: #B9B6FA;
  padding: 18px;
  text-align: center;
  color: #000;
}

.container, .horizontal-nav ul {
  width: 990px;
  margin: 0 auto 0 auto;
}





body {
  box-sizing: border-box;
  font-family: "HelveticaNeue-Light", "HelveticaNeue-Light", "Helvetica Neue Light", "Helvetica Neue", Helvetica, Arial, "Lucida Grande", Sans-Serif;
  margin: 0;
}