Pen Settings

HTML

CSS

CSS Base

Vendor Prefixing

Add External Stylesheets/Pens

Any URL's added here will be added as <link>s in order, and before the CSS in the editor. If you link to another Pen, it will include the CSS from that Pen. If the preprocessor matches, it will attempt to combine them before processing.

+ add another resource

JavaScript

Babel is required to process package imports. If you need a different preprocessor remove all packages first.

Add External Scripts/Pens

Any URL's added here will be added as <script>s in order, and run before the JavaScript in the editor. You can use the URL of any other Pen and it will include the JavaScript from that Pen.

+ add another resource

Behavior

Save Automatically?

If active, Pens will autosave every 30 seconds after being saved once.

Auto-Updating Preview

If enabled, the preview panel updates automatically as you code. If disabled, use the "Run" button to update.

Format on Save

If enabled, your code will be formatted when you actively save your Pen. Note: your code becomes un-folded during formatting.

Editor Settings

Code Indentation

Want to change your Syntax Highlighting theme, Fonts and more?

Visit your global Editor Settings.

HTML

              
                <div class="page">
  <nav id="global-nav" class="global-nav" role="navigation">
    <ul class="menu">
      <li id="shortcuts-nav" class="nav">
        <a href="#" id="shortcuts-item"><span>Shortcuts</span></a>
        <ul class="panel">
          <li>
            <a href="#services">Services</a>
          </li>
          <li>
            <a href="#case-studies">Case Studies</a>
          </li>
          <li>
            <a href="#careers">Careers</a>
          </li>
          <li>
            <a href="#news">News</a>
          </li>
          <li>
            <a href="#events">Events</a>
          </li>
        </ul>
      </li>
      <li id="utility-nav">
        <ul>
          <li id="nav-search" class="nav">
            <a href="#"><span>Search</span></a>
            <form id="form-search" class="form-fields panel" action="#">
              <fieldset class="fields-search">
                <input id="search-terms" class="input-text" type="text" placeholder="Enter keywords..." />
                <input id="submit-search" class="button" type="submit" value="Search" />
              </fieldset>
            </form>
          </li>
          <li id="nav-directory" class="nav">
            <a href="#" id="nav-directory-item"><span><b>A-Z</b> Directory</span></a>
            <div class="panel" id="panel-directory">
              <p>Alphabetical Directory</p>
              <ul id="alpha">
                <li>
                  <a href="#a" rel="A">A</a>
                </li>
                <li>
                  <a href="#b" rel="B">B</a>
                </li>
                <li>
                  <a href="#c" rel="C">C</a>
                </li>
                <li>
                  <a href="#d" rel="D">D</a>
                </li>
                <li>
                  <a href="#e" rel="E">E</a>
                </li>
                <li>
                  <a href="#f" rel="F">F</a>
                </li>
                <li>
                  <a href="#g" rel="G">G</a>
                </li>
                <li>
                  <a href="#h" rel="H">H</a>
                </li>
                <li>
                  <a href="#i" rel="I">I</a>
                </li>
                <li>
                  <a href="#j" rel="J">J</a>
                </li>
                <li>
                  <a href="#k" rel="K">K</a>
                </li>
                <li>
                  <a href="#l" rel="L">L</a>
                </li>
                <li>
                  <a href="#m" rel="M">M</a>
                </li>
                <li>
                  <a href="#n" rel="N">N</a>
                </li>
                <li>
                  <a href="#o" rel="O">O</a>
                </li>
                <li>
                  <a href="#p" rel="P">P</a>
                </li>
                <li>
                  <a href="#q" rel="Q">Q</a>
                </li>
                <li>
                  <a href="#r" rel="R">R</a>
                </li>
                <li>
                  <a href="#s" rel="S">S</a>
                </li>
                <li>
                  <a href="#t" rel="T">T</a>
                </li>
                <li>
                  <a href="#u" rel="U">U</a>
                </li>
                <li>
                  <a href="#v" rel="V">V</a>
                </li>
                <li>
                  <a href="#w" rel="W">W</a>
                </li>
                <li>
                  <a href="#x" rel="X">X</a>
                </li>
                <li>
                  <a href="#y" rel="Y">Y</a>
                </li>
                <li>
                  <a href="#z" rel="Z">Z</a>
                </li>
                <li>
                  <a href="##" rel="#">#</a>
                </li>
              </ul>
            </div>
          </li>
          <li id="nav-contact" class="nav">
            <a href="#"><span>Email</span></a>
            <form id="form-contact" class="form-fields panel" action="#">
              <fieldset class="fields-contact">
                <input id="email-name" class="input-text" type="text" placeholder="Full Name" />
                <input id="email-address" class="input-text" type="email" placeholder="name@example.com" />
                <input id="email-subject" class="input-text" type="text" placeholder="Subject" />
              </fieldset>
              <textarea id="email-message" class="textarea" placeholder="Enter your message" cols="8"></textarea>
              <input id="submit-contact" class="button" type="submit" value="Send Message" />
            </form>
          </li>
        </ul>
      </li>
    </ul>
  </nav>
  <header class="main-header">
    <h1 class="branding">
      <a href="#">Brand</a>
    </h1>
    <nav role="navigation" class="main-nav">
      <ul class="menu">
        <li class="top-level">
          <a href="#about">About</a>
        </li>
        <li class="top-level">
          <a href="#team">Team</a>
        </li>
        <li class="top-level">
          <a href="#work">Work</a>
        </li>
        <li class="top-level">
          <a href="#process">Process</a>
        </li>
        <li class="top-level">
          <a href="#blog">Blog</a>
        </li>
        <li class="top-level">
          <a href="#contact">Contact</a>
        </li>
      </ul>
    </nav>
  </header>
  <footer>
    <div id="bottom">
      <section id="section-info">
        <div class="organization-info">
          <div class="vcard">
            <h2>
              <a href="./">Brand</a>
            </h2>
            <p class="contact-info">
              <span class="org fn">Company Name Inc.</span>
              <br>
              <span class="adr"><span class="street-address">12345 Main Street</span><br><span class="locality">City Name</span>,
            <span class="region">Region</span> <span class="postal-code">98765</span></span>
            </p>
            <p class="phone-numbers">
              <span class="tel-admission">
                <span class="label">Phone:</span>
                <a href="tel:+1-123-456-7890" class="tel">123-456-7890</a>
              </span>
              <br>
              <span class="tel-campus-safety">
                <span class="label">Toll Free:</span>
                <a href="tel:+1-800-555-5555" class="tel">1-800-555-5555</a>
              </span>
            </p>
          </div>
        </div>
        <nav class="footer-nav">
          <div class="nav-group">
            <div class="container">
              <h4>
                <a href="#">About</a>
              </h4>
              <ul>
                <li>
                  <a href="#">Members</a>
                </li>
                <li>
                  <a href="#">History</a>
                </li>
                <li>
                  <a href="#">Questions</a>
                </li>
                <li>
                  <a href="#">Mission &amp; Values</a>
                </li>
              </ul>
            </div>
          </div>
          <div class="nav-group">
            <div class="container">
              <h4>
                <a href="#">Team</a>
              </h4>
              <ul>
                <li>
                  <a href="#">Creative Services</a>
                </li>
                <li>
                  <a href="#">Web Communications</a>
                </li>
                <li>
                  <a href="#">Media Information</a>
                </li>
              </ul>
              <h4>
                <a href="#">Careers</a>
              </h4>
              <ul>
                <li>
                  <a href="#">UX Design</a>
                </li>
                <li>
                  <a href="#">Development</a>
                </li>
                <li>
                  <a href="#">Marketing</a>
                </li>
              </ul>
            </div>
          </div>
          <div class="nav-group">
            <div class="container">
              <h4>
                <a href="#">Resources</a>
              </h4>
              <ul>
                <li>
                  <a href="#">Human Resources</a>
                </li>
                <li>
                  <a href="#">Information Technology Services</a>
                </li>
                <li>
                  <a href="#">Email Services</a>
                </li>
                <li>
                  <a href="#">Safety Policy</a>
                </li>
                <li>
                  <a href="#">Emergency</a>
                </li>
                <li>
                  <a href="#">Bookstore</a>
                </li>
                <li>
                  <a href="#">Childcare</a>
                </li>
              </ul>
            </div>
          </div>
        </nav>
        <div class="site-info">
          <p class="copyright">Creative Commons <a href="https://creativecommons.org/licenses/by-sa/4.0/">CC BY-SA</a> | <a href="#">Terms of Use</a> | <a href="#">Privacy Policy</a></p>
        </div>
      </section>
    </div>
    <section id="section-resources">
      <nav class="grid-nav">
        <h4>Customers &amp; Partners</h4>
        <ul>
          <li class="grid-item">
            <a href="#">Logo</a>
          </li>
          <li class="grid-item">
            <a href="#">Logo</a>
          </li>
          <li class="grid-item">
            <a href="#">Logo</a>
          </li>
          <li class="grid-item">
            <a href="#">Logo</a>
          </li>
          <li class="grid-item">
            <a href="#">Logo</a>
          </li>
          <li class="grid-item">
            <a href="#">Logo</a>
          </li>
          <li class="grid-item">
            <a href="#">Logo</a>
          </li>
          <li class="grid-item">
            <a href="#">Logo</a>
          </li>
          <li class="grid-item">
            <a href="#">Logo</a>
          </li>
          <li class="grid-item">
            <a href="#">Logo</a>
          </li>
          <li class="grid-item">
            <a href="#">Logo</a>
          </li>
          <li class="grid-item">
            <a href="#">Logo</a>
          </li>
          <li class="grid-item">
            <a href="#">Logo</a>
          </li>
          <li class="grid-item">
            <a href="#">Logo</a>
          </li>
          <li class="grid-item">
            <a href="#">Logo</a>
          </li>
          <li class="grid-item">
            <a href="#">Logo</a>
          </li>
        </ul>
      </nav>
    </section>
  </footer>
</div>

              
            
!

CSS

              
                /*
==================================================

Reset

==================================================
*/
html, body, div, span, applet, object, iframe,
h1, h2, h3, h4, h5, h6, p, blockquote, pre,
a, abbr, acronym, address, big, cite, code,
del, dfn, em, img, ins, kbd, q, s, samp,
small, strike, strong, sub, sup, tt, var,
b, u, i, center,
dl, dt, dd, ol, ul, li,
fieldset, form, label, legend,
table, caption, tbody, tfoot, thead, tr, th, td,
article, aside, canvas, details, embed,
figure, figcaption, footer, header, hgroup,
menu, nav, output, ruby, section, summary,
time, mark, audio, video {
  margin: 0;
  padding: 0;
  border: 0;
  font: inherit;
  font-size: 100%;
  vertical-align: baseline;
}

html {
  line-height: 1;
}

ol, ul {
  list-style: none;
}

table {
  border-collapse: collapse;
  border-spacing: 0;
}

caption, th, td {
  text-align: left;
  font-weight: normal;
  vertical-align: middle;
}

q, blockquote {
  quotes: none;
}
q:before, q:after, blockquote:before, blockquote:after {
  content: "";
  content: none;
}

a img {
  border: none;
}

article, aside, details, figcaption, figure, footer, header, hgroup, menu, nav, section, summary {
  display: block;
}


/*
==================================================

ELEMENTS

==================================================
*/

/*
--------------------------------------------------
Root Element
-------------------------------------------------- */
body {
  min-width: 300px;
}

/*
--------------------------------------------------
Text-Level Semantics
-------------------------------------------------- */
/* Anchors
-------------------------------------------------- */
a {
  text-decoration: none;
}

/* Modifiers
-------------------------------------------------- */
strong {
  font-weight: bold;
}

em {
  font-style: italic;
}

/*
--------------------------------------------------
Grouping Content
-------------------------------------------------- */
p,
dl,
hr,
ol,
ul,
pre,
table,
address,
fieldset {
  margin-bottom: 20px;
}

hr {
  border-color: #ddd;
  border-style: solid;
  border-width: 1px 0 0;
  height: 0;
}

u {
  text-decoration: none;
  border-bottom: 1px dotted #777;
}

/*
--------------------------------------------------
Document Sections
-------------------------------------------------- */
article, aside, details, figcaption, figure,
footer, header, hgroup, menu, nav, section {
  display: block;
}

/*
==================================================

TYPOGRAPHY

==================================================
*/
/*
--------------------------------------------------
Fonts
-------------------------------------------------- */
body {
  font: normal 100%/1.5em "Open Sans", Helvetica, Arial, sans-serif;
  color: #666;
}

/*
--------------------------------------------------
Headings
-------------------------------------------------- */
h1 {
  font-size: 2.6em;
}

h2 {
  font-size: 2.2em;
}

h3 {
  font-size: 1.8em;
}

h4 {
  font-size: 1.6em;
}

h5 {
  font-size: 1.4em;
}

h6 {
  font-size: 1.2em;
}

h1,
h2,
h3,
h4,
h5,
h6 {
  font-weight: normal;
  margin-bottom: .5em;
  line-height: 1.2em;
}

/*
--------------------------------------------------
Text and Anchors
-------------------------------------------------- */
p {
  font-family: Georgia, "Times New Roman", serif;
}

b {
  font-weight: bold;
}

/*
--------------------------------------------------
Lists
-------------------------------------------------- */
ol {
  list-style: decimal;
}

ul {
  list-style: square;
}

li {
  margin-left: 24px;
}

ul li {
  list-style-type: disc;
}

ol li {
  list-style-type: decimal;
}

ol li ol li {
  list-style-type: lower-alpha;
}

ul li li {
  list-style-type: circle;
}

ul ul,
ol ul,
ol ol {
  margin-bottom: 0;
}

ol ul li {
  list-style-type: disc;
}

ol ul li li {
  list-style-type: circle;
}

/*
--------------------------------------------------
Tables
-------------------------------------------------- */
th,
td {
  text-align: left;
}

td {
  vertical-align: top;
}

th {
  font-weight: bold;
}

/*
--------------------------------------------------
Miscellaneous
-------------------------------------------------- */
/* Blockquotes
-------------------------------------------------- */
blockquote {
  border-left: 3px solid #d14414;
  background-color: #fff;
  padding: 0px 0px 0px 12px;
  margin-left: 17px;
}

blockquote p:last-child {
  margin-bottom: 0;
}

/* Code
-------------------------------------------------- */
pre {
  white-space: normal;
  padding: 1em 1.5em;
  border: 1px solid #ddd;
  background-color: #eee;
  word-wrap: break-word;
}

code {
  white-space: pre;
  font-family: monospace;
  font-size: 1.2em;
  color: #000;
}

/*
--------------------------------------------------
Branding
-------------------------------------------------- */
.branding {
  font-family: "Raleway", Helvetica, Arial, sans-serif;
  font-weight: 300;
}

/*
--------------------------------------------------
Navigation
-------------------------------------------------- */
/* Global Navigation
-------------------------------------------------- */
.global-nav {
  font-size: .875em;
  font-size: .875rem;
}

/* Utility Navigation
-------------------------------------------------- */
#shortcuts-item,
#utility-nav li a {
  font-size: .875em;
  font-size: .75rem;
  text-transform: uppercase;
  padding-top: .6em;
  padding-bottom: 1.1em;
}

/* Main Navigation
-------------------------------------------------- */
.main-nav {
  font-size: .875em;
  font-weight: bold;
  text-transform: uppercase;
  letter-spacing: .1em;
}

/*
--------------------------------------------------
Buttons
-------------------------------------------------- */
.button {
  display: inline-block;
  font: bold normal 0.75em/1 "Open Sans", Helvetica, Arial, sans-serif;
  text-transform: uppercase;
  letter-spacing: .1em;
  padding: .8em 1.2em;
}

/*
==================================================

CONTENT

==================================================
*/
/*
--------------------------------------------------
Branding
-------------------------------------------------- */
.branding {
  margin: 0;
}
.branding a {
  display: block;
  padding: .6em 40px .6em;
}

/*
--------------------------------------------------
Navigation
-------------------------------------------------- */
.global-nav,
.main-nav {
  white-space: nowrap;
  margin: 0;
}
.global-nav ul,
.main-nav ul {
  margin: 0;
  padding: 0;
}
.global-nav li,
.main-nav li {
  margin: 0;
  padding: 0;
  list-style: none;
}
.global-nav a,
.main-nav a {
  display: block;
  padding: .7em 12px;
}

.global-nav a span {
  display: none;
}

.global-nav li {
  float: left;
}

.main-nav ul {
  margin: 0;
  padding: 0;
}
.main-nav ul li {
  position: relative;
  z-index: 2;
}

.main-nav li ul.sub-menu {
  display: none;
}

.fields-search {
  margin-bottom: 0;
}

.open .panel {
  display: block;
}

.panel {
  display: none;
  position: absolute;
  left: 0;
  right: 0;
  background: #333;
  overflow: hidden;
  z-index: 2000;
  padding: 20px;
  white-space: normal;
  box-sizing: border-box;
}

.panel p {
  font: normal normal 0.85em/1 "Open Sans", Helvetica, Arial, sans-serif;
  text-transform: uppercase;
}

#nav-directory .panel ul li {
  width: 20%;
}

#nav-directory .panel a {
  font-size: 1em;
  text-indent: 0;
  text-align: center;
}

#shortcuts-nav.open .panel a {
  /* Fix for iPhone font resizing jump */
  font-size: 14px;
}

#shortcuts-nav {
  width: 25%;
}

#utility-nav {
  width: 75%;
}

#utility-nav .nav {
  width: 33.3333333333%;
}

.nav > a{
  text-align: center;
}

.nav > a:before {
  font-family: 'Octicons';
  -webkit-font-smoothing: antialiased;
  font-size: 2em;
  position: relative;
  top: .2em;
}

#shortcuts-item:before {
  content: "\f05e";
  left: .1em;
}

#nav-search > a:before {
  content: "\f02e";
  top: .25em;
}

#nav-directory-item:before {
  content: "\f007";
}

#nav-contact a:before {
  content: "\f03b";
  left: .1em;
  top: .18em;
}

#nav-search input[type='text'] {
  margin-top: 0;
}

.panel input[type='submit'] {
  margin-bottom: 0;
}

#nav-search input[type='submit'],
#nav-contact input[type='submit'] {
  margin: 0;
}

#nav-contact textarea {
  margin-bottom: .5em;
  height: 7.2em;
}

.panel fieldset {
  margin: 0;
}

/* Main Navigation
-------------------------------------------------- */
.main-nav {
  padding: 0;
  border-top: none;
}

.main-nav li {
  border-top: 1px solid #e4e4e4;
  padding-bottom: 0px;
}

.main-nav li a {
  padding: 10px 20px;
  border-radius: 0;
}

/* Sub Navigation
-------------------------------------------------- */
.sub-nav {
  position: relative;
  left: 0;
  right: 0;
  z-index: 19;
  margin-bottom: 0px;
  display: none;
}
.sub-nav a {
  color: #fff;
  color: rgba(255, 255, 255, 0.6);
  display: block;
}
.sub-nav a:hover {
  color: #fff;
}
.sub-nav li {
  margin: 0;
  padding: 0;
  list-style: none;
}
.sub-nav .level-2 {
  margin-bottom: 0;
}
.sub-nav .level-2 > .subsection {
  display: none;
  padding: 20px;
  border-top: none!important;
}
.sub-nav .level-2 .nav-close {
  position: relative;
  display: block;
  max-width: 1040px;
  margin: 0 auto;
  text-align: right;
}
.sub-nav .level-2 .nav-close a {
  position: absolute;
  right: 0;
  top: 30px;
  display: block;
  width: 40px;
  height: 20px;
  padding: 6px 0 14px;
  text-align: center;
  color: #fff;
  background: #000;
  background: rgba(0, 0, 0, 0.1);
  cursor: pointer;
}
.sub-nav .level-2 .nav-close a:hover {
  background: rgba(0, 0, 0, 0.3);
}
.sub-nav .level-3 {
  max-width: 1080px;
  margin: 0 auto;
}
.sub-nav .level-3 h4 a {
  color: #fff;
}
.sub-nav .level-3 h4 a:hover {
  font-weight: bold;
}
.sub-nav .subsection h3 {
  max-width: 1040px;
  margin: 0 auto;
  padding: 20px 0;
  border-bottom: 1px solid #fff;
  border-color: rgba(255, 255, 255, 0.4);
  display: block;
  font-size: 1.5em;
}
.sub-nav .subsection h3 a {
  color: #fff;
  padding: 0;
}
.sub-nav .subsection h3 a:hover {
  font-weight: bold;
}

.sub-nav:hover li {
  display: block;
}

@media screen and (max-width: 1120px) {
  .sub-nav .subsection h3 {
    margin: 0 20px;
  }

  .sub-nav .level-2 .nav-close {
    margin: 0 40px;
  }
}
.nav-close.bottom {
  display: none;
}

.sub-nav .level-2 > .subsection {
  display: none;
  padding: 20px;
}

.sub-nav .level-2 > .subsection {
  border-top: none!important;
}

.level-3 {
  overflow: hidden;
  margin-bottom: 20px;
}
.level-3 > div h4 {
  font-size: 1em;
  padding: 0 20px;
  margin-top: 20px;
  text-transform: uppercase;
}

.level-4 {
  padding: 0 20px;
  font-size: .875em;
}
.level-4 > li {
  line-height: 1.2em;
  margin: .5em 0;
}

.section-nav {
  padding-bottom: 20px;
}
.section-nav .level-4 {
  padding-bottom: 10px;
}

/*
--------------------------------------------------
Footer
-------------------------------------------------- */
.section-container {
  padding: 20px;
}

.nav-group .container {
  padding: 0 20px;
}

.organization-info .vcard {
  padding: 20px;
}

.organization-info .copyright {
  padding: 0 20px 40px;
}

.organization-info h2 {
  font-family: "Raleway", Helvetica, Arial, sans-serif;
  font-weight: 100;
}

.organization-info h2 a {
  color: #ccc;
}

.organization-info h2 a:hover {
  color: #fff;
}

.organization-info p {
  font-family: 'Open Sans', Helvetica, Arial, sans-serif;
  font-size: .875em;
  color: #999;
}

.organization-info a:hover {
  color: #fff;
}

.contact-info .vcard {
  padding: 20px;
}

.nav-group .container {
  padding: 0 20px;
}

.contact-info .copyright {
  padding: 0 20px 40px;
}

.contact-info h2 {
  color: #fff;
}

.contact-info p {
  font-family: 'Open Sans', Helvetica, Arial, sans-serif;
  font-size: .875em;
  color: #ba969d;
}

.contact-info a {
  color: #fff;
}

.contact-info a:hover {
  color: #fff;
}

.footer-nav h4 {
  font-size: .75em;
  text-transform: uppercase;
  letter-spacing: .1em;
  margin-bottom: .25em;
}

.footer-nav h4 a {
  color: #ccc;
}

.footer-nav h4 a:hover {
  color: #fff;
}

.footer-nav li {
  font-size: .875em;
  list-style: none;
  margin: 0;
  color: #ba969d;
}

.footer-nav li a {
}

.footer-nav li a:hover {
  color: #fff;
}

.site-info {
  font-size: .875em;
  padding: 20px;
}

p.copyright {
  font-family: "Open Sans", Helvetica, Arial, sans-serif;
  margin: 20px 0 0;
}

/*
--------------------------------------------------
Grid Items
-------------------------------------------------- */
.grid-nav {
  padding: 20px;
}

.grid-nav h4 {
  font-size: .75em;
  text-transform: uppercase;
  letter-spacing: .1em;
  color: #666;
  margin: 20px;
}

.grid-nav ul {
  padding: 15px;
}

.grid-nav li {
  list-style: none;
  margin: 0;
}

.grid-item {
  box-sizing: border-box;
  padding: 5px;
}

.grid-item a {
  display: block;
  text-align: center;
  padding: 20px;
}


/*
==================================================

LAYOUT

==================================================
*/
#bottom {
  padding: 20px;
}

/*
--------------------------------------------------
Clearing
-------------------------------------------------- */
/* http://www.positioniseverything.net/easyclearing.html */
.global-nav ul:after,
.main-header:after,
.main-nav ul:after,
section:after,
.clearfix:after {
  content: ".";
  display: block;
  height: 0;
  clear: both;
  visibility: hidden;
}

.global-nav ul,
.main-header,
.main-nav ul,
section,
.clearfix {
  zoom: 1;
  display: block;
}

/*
==================================================

COLORS

==================================================
*/
/*
--------------------------------------------------
Typography
-------------------------------------------------- */
a {
  color: #0098c1;
}

/*
--------------------------------------------------
Backgrounds
-------------------------------------------------- */
/* Area Backgrounds
-------------------------------------------------- */
#main,
#overview {
  background-color: #f1f1f1;
}

#content {
  background-color: #f1f1f1;
}

#secondary {
  background-color: #eee;
}

#bottom {
  background-color: #222;
}

/*
--------------------------------------------------
Branding
-------------------------------------------------- */
.branding a {
  color: #666;
}

.branding a:hover {
  color: #000;
}

/* Navigation Backgrounds
-------------------------------------------------- */
.global-nav {
  background-color: #555;
}

.global-nav a {
  color: #aaa;
}

.global-nav a:hover {
  color: #fff;
  background-color: #333;
}

.global-nav a:active {
  background-color: #000;
}

.global-nav .open > a {
  color: #fff;
  background-color: #333;
}

.global-nav .nav .panel a:active,
.global-nav .nav > a:active,
.global-nav .open > a:active {
  background-color: #000;
}

#nav-directory .panel a:hover {
  background: #222;
}

#nav-directory .panel a:active,
.global-nav .panel a:active {
  background: #000;
}

.nav .panel p {
  color: #ccc;
}

.main-nav a {
  color: #444;
}

.main-nav li.active a,
.main-nav a:hover {
  color: #0098c1;
}

.nav > a:before {
  color: #fff;
}

/* Grid Items
-------------------------------------------------- */
.grid-item a {
  background: #f9f9f9;
}

.grid-item a:hover {
  background: #eee;
}


/*
==================================================

FORMS

==================================================
*/

::placeholder {
  color: #ccc;
}

input,
select,
textarea {
  box-sizing: padding-box;
}

textarea,
input[type="text"],
input[type="email"],
input[type="number"] {
  color: black;
  font-size: 1em;
  line-height: 1.5em;
  width: 100%;
  box-sizing: border-box;
  padding: .75em;
  margin: 0 0 1em;
  border: 1px solid #ccc;
}

select {
  background: #fff;
  width: 100%;
  font-size: 1em;
  padding: 1em .75em;
  border: 1px solid #ccc;
  border-radius: 0;
  -webkit-appearance: none;
  -moz-appearance: none;
  text-overflow: '';
}

.dropdown {
  position: relative;
  margin: .5em 0 2em;
}

.dropdown .dropdown-options::after {
  color: #999;
  display: block;
  background: white;
  padding: .5em .3em .4em .8em;
  font-family: "Octicons";
  content: "\f0a3";
  font-size: 1.3em;
  pointer-events: none;
  position: absolute;
  top: .2em;
  right: .2em;
  border-left: 1px solid #eee;
}

label.field {
  font-weight: 700;
  display: block;
  margin-top: .75em;
}

form.submitted input:valid,
form.submitted select:valid,
form.submitted textarea:valid {
  border: 1px solid #ccc;
}

form.submitted input:invalid,
form.submitted select:invalid,
form.submitted textarea:invalid {
  border: 1px solid #f00;
  box-shadow: 0 0 0 2px #f00;
}

.checkboxes,
.radio-buttons {
  margin: .5em 0 1.5em;
}

.checkboxes label,
.radio-buttons label {
  margin-bottom: .5em;
  display: block;
}

.button,
button {
  font-size: 1em;
  font-weight: normal;
  text-transform: uppercase;
  color: #fff;
  background: #444;
  width: 100%;
  margin: .5em 0 1em;
  padding: 1em .75em;
  border: 1px solid #000;
  border-radius: 0;
  -webkit-appearance: none;
  -moz-appearance: none;
}

.button:hover,
button:hover {
  background: #000;
}

.button:active,
button:active {
  background: #0098c1;
}


/*
==================================================

MEDIA QUERIES

==================================================
*/

/*
--------------------------------------------------
Small Screens (320 pixels wide)
-------------------------------------------------- */
@media only screen and (min-width: 320px) {
  .main-nav {
    padding: 0;
    border-top: none;
  }

  .main-nav li {
    float: left;
    border-top: 1px solid #e4e4e4;
    width: 50%;
    padding-bottom: 0px;
  }

  .main-nav li a {
    padding: 10px 20px;
    border-radius: 0;
  }

  .main-nav li:nth-child(odd) {
    border-right: 1px solid #e4e4e4;
    margin-right: -1px;
  }
}

/*
--------------------------------------------------
Small Screens (480 pixels wide)
-------------------------------------------------- */
@media only screen and (min-width: 480px) {

  #nav-directory .panel ul li {
    width: 10%;
  }
}

/*
--------------------------------------------------
Small Screens (600 pixels wide)
-------------------------------------------------- */
@media only screen and (min-width: 600px) {

  .global-nav a span {
    display: inline;
  }

  #shortcuts-item,
  #utility-nav li a {
    text-align: left;
  }

  #shortcuts-item:before,
  #nav-search a:before,
  #nav-directory a:before,
  #nav-contact a:before {
    font-size: 2em;
    margin-right: .25em;
  }

  /* Footer
  -------------------------------------------------- */
  .organization-info {
    float: left;
    width: 50%;
  }

  .footer-nav {
    float: left;
    width: 50%;
    padding-top: 20px;
  }

  .nav-group {
    float: left;
  }

  .site-info {
    float: left;
  }

  .grid-nav li {
    float: left;
    width: 50%;
  }
}

/*
--------------------------------------------------
Small Screens (749 pixels wide max)
-------------------------------------------------- */
@media only screen and (max-width: 749px) {

  #shortcuts-nav ul {
    display: none;
    position: absolute;
    left: 0;
    right: 0;
    background: #333;
    overflow: hidden;
    z-index: 20;
  }

  #shortcuts-nav.open ul {
    display: block;
  }

  #shortcuts-nav.open #shortcuts-item {
    background: #333;
  }

  #shortcuts-nav ul li {
    width: 100%;
    border-top: 1px solid #444;
  }

  #shortcuts-nav.open #shortcuts-item:hover,
  #shortcuts-nav ul li a:hover {
    background: #222;
  }

  #shortcuts-nav.open #shortcuts-item:active,
  #shortcuts-nav ul li a:active {
    background: #000;
  }

}

/*
--------------------------------------------------
Medium Screens (750 pixels wide)
-------------------------------------------------- */
@media only screen and (min-width: 750px) {

  /*
  --------------------------------------------------
  Default Page Structure
  -------------------------------------------------- */
  header,
  section,
  #supplementary,
  .secondary-content,
  .global-nav ul.menu,
  .footer-nav {
    max-width: 1120px;
    margin: 0 auto;
  }

  #section-info {
    max-width: 1080px;
  }

  #shortcuts-nav {
    width: auto;
  }

  #shortcuts-item {
    display: none;
  }

  #shortcuts-nav .panel {
    background: none;
    position: static;
  }

  .global-nav #shortcuts-nav .panel a:hover {
    background-color: #333;
  }

  .global-nav #shortcuts-nav .panel a:active {
    background-color: #000;
  }

  #utility-nav {
    width: auto;
    float: right;
  }

  #utility-nav .nav {
    width: auto;
  }

  #nav-search,
  #nav-directory,
  #nav-contact {
    width: auto;
  }

  #nav-search .panel,
  #nav-contact .panel {
    max-width: 1120px;
    margin: 0 auto;
  }

  #nav-search input {
    margin-top: 0;
    float: left;
  }

  #nav-search input[type='text'] {
    width: 79%;
    margin-right: 1%;
    margin-bottom: 0;
  }

  #nav-search .button {
    width: 20%;
  }

  #nav-directory {
    position: relative;
  }

  #nav-directory .panel {
    width: 320px;
    left: auto;
    right: 0;
  }

  #nav-directory .panel ul li {
    width: 20%;
  }

  #nav-contact fieldset {
    float: left;
    width: 48.5%;
    margin-right: 1.5%;
    margin-bottom: 0;
  }

  #email-subject {
    margin-bottom: 0;
  }

  #nav-contact textarea {
    width: 50%;
  }

  #nav-contact .button {
    width: 50%;
  }

  .main-nav {
    font-weight: normal;
    padding-left: 40px;
    border-top: 1px solid #e4e4e4;
  }

  .main-nav li {
    border: none;
    width: auto;
  }

  .main-nav li:nth-child(odd) {
    border-right: none;
    margin-right: 0;
  }

  .main-nav a {
    padding: 3em 2em;
    border-bottom: 6px solid #fff;
  }

  .main-nav li.active a,
  .main-nav a:hover {
    border-bottom: 6px solid #0098c1;
  }

  /* Grid
  -------------------------------------------------- */
  .grid-nav li {
    float: left;
    width: 25%;
  }
}

/*
--------------------------------------------------
Large Screens (980 pixels wide)
-------------------------------------------------- */
@media only screen and (min-width: 980px) {


  /* Header
  -------------------------------------------------- */
  .branding {
    float: left;
  }

  .main-nav {
    font-size: 1em;
    float: right;
    border-top: none;
  }

  .main-nav li a {
    padding: 2.5em 1em;
  }

  /* Footer
  -------------------------------------------------- */
  .organization-info {
    float: left;
    width: 25%;
  }

  .footer-nav {
    width: 75%;
    padding: 0;
  }

  .nav-group {
    float: left;
    width: 33.3333333333%;
  }

  .nav-group .container {
    padding: 20px;
  }

  /* Grid
  -------------------------------------------------- */
  .grid-nav li {
    float: left;
    width: 12.5%;
  }
}

              
            
!

JS

              
                var nav = document.getElementById("global-nav");
var navItems = nav.getElementsByClassName("nav");

activateMenus(navItems);

function activateMenus(menus) {
  for (var i = 0; i < menus.length; i++) {
    menus[i].addEventListener("click", function( event ) {
      var panel = this.getElementsByClassName("panel")[0];
      if (this.classList.contains("open")) {
        if (!this.contains(event.target)) {
          closePanels(menus);
        } else {
          if (!panel.contains(event.target)) {
            this.classList.remove("open");
          }
        }
      } else {
        closePanels(menus);
        this.classList.add("open");
      }
    });
  }
  clickOutsideMenus(menus);
}

function closePanels(menus) {
  for (var i = 0; i < menus.length; i++) {
    menus[i].classList.remove("open");
  }
}

function clickOutsideMenus(menus) {
    document.addEventListener("click", function( event ) {
    var openMenu = nav.getElementsByClassName("open")[0];
    if(openMenu !== undefined) {
      if (!openMenu.contains(event.target)) {
        closePanels(menus);
      }
    }
  });
}

              
            
!
999px

Console