Pen Settings

HTML

CSS

CSS Base

Vendor Prefixing

Add External Stylesheets/Pens

Any URLs added here will be added as <link>s in order, and before the CSS in the editor. You can use the CSS from another Pen by using its URL and the proper URL extension.

+ add another resource

JavaScript

Babel includes JSX processing.

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

Packages

Add Packages

Search for and use JavaScript packages from npm here. By selecting a package, an import statement will be added to the top of the JavaScript editor for this package.

Behavior

Auto Save

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

              
                  <header>
    <div class="cd-dropdown-wrapper">
      <a class="cd-dropdown-trigger" href="#0">Dropdown</a>
      <nav class="cd-dropdown">
        <h2>Title</h2>
        <a href="#0" class="cd-close">Close</a>
        <ul class="cd-dropdown-content">
          <li>
            <form class="cd-search">
              <input type="search" placeholder="Search...">
            </form>
          </li>
          <li class="has-children">
            <a href="https://codyhouse.co/?p=748">Clothing</a>

            <ul class="cd-secondary-dropdown is-hidden">
              <li class="go-back"><a href="#0">Menu</a></li>
              <li class="see-all"><a href="https://codyhouse.co/?p=748">All Clothing</a></li>
              <li class="has-children">
                <a href="https://codyhouse.co/?p=748">Accessories</a>

                <ul class="is-hidden">
                  <li class="go-back"><a href="#0">Clothing</a></li>
                  <li class="see-all"><a href="https://codyhouse.co/?p=748">All Accessories</a></li>
                  <li class="has-children">
                    <a href="#0">Beanies</a>

                    <ul class="is-hidden">
                      <li class="go-back"><a href="#0">Accessories</a></li>
                      <li class="see-all"><a href="https://codyhouse.co/?p=748">All Benies</a></li>
                      <li><a href="https://codyhouse.co/?p=748">Caps &amp; Hats</a></li>
                      <li><a href="https://codyhouse.co/?p=748">Gifts</a></li>
                      <li><a href="https://codyhouse.co/?p=748">Scarves &amp; Snoods</a></li>
                    </ul>
                  </li>
                  <li class="has-children">
                    <a href="#0">Caps &amp; Hats</a>

                    <ul class="is-hidden">
                      <li class="go-back"><a href="#0">Accessories</a></li>
                      <li class="see-all"><a href="https://codyhouse.co/?p=748">All Caps &amp; Hats</a></li>
                      <li><a href="https://codyhouse.co/?p=748">Beanies</a></li>
                      <li><a href="https://codyhouse.co/?p=748">Caps</a></li>
                      <li><a href="https://codyhouse.co/?p=748">Hats</a></li>
                    </ul>
                  </li>
                  <li><a href="https://codyhouse.co/?p=748">Glasses</a></li>
                  <li><a href="https://codyhouse.co/?p=748">Gloves</a></li>
                  <li><a href="https://codyhouse.co/?p=748">Jewellery</a></li>
                  <li><a href="https://codyhouse.co/?p=748">Scarves</a></li>
                </ul>
              </li>

              <li class="has-children">
                <a href="https://codyhouse.co/?p=748">Bottoms</a>

                <ul class="is-hidden">
                  <li class="go-back"><a href="#0">Clothing</a></li>
                  <li class="see-all"><a href="https://codyhouse.co/?p=748">All Bottoms</a></li>
                  <li><a href="https://codyhouse.co/?p=748">Casual Trousers</a></li>
                  <li class="has-children">
                    <a href="#0">Jeans</a>

                    <ul class="is-hidden">
                      <li class="go-back"><a href="#0">Bottoms</a></li>
                      <li class="see-all"><a href="https://codyhouse.co/?p=748">All Jeans</a></li>
                      <li><a href="https://codyhouse.co/?p=748">Ripped</a></li>
                      <li><a href="https://codyhouse.co/?p=748">Skinny</a></li>
                      <li><a href="https://codyhouse.co/?p=748">Slim</a></li>
                      <li><a href="https://codyhouse.co/?p=748">Straight</a></li>
                    </ul>
                  </li>
                  <li><a href="#0">Leggings</a></li>
                  <li><a href="#0">Shorts</a></li>
                </ul>
              </li>

              <li class="has-children">
                <a href="https://codyhouse.co/?p=748">Jackets</a>

                <ul class="is-hidden">
                  <li class="go-back"><a href="#0">Clothing</a></li>
                  <li class="see-all"><a href="https://codyhouse.co/?p=748">All Jackets</a></li>
                  <li><a href="https://codyhouse.co/?p=748">Blazers</a></li>
                  <li><a href="https://codyhouse.co/?p=748">Bomber jackets</a></li>
                  <li><a href="https://codyhouse.co/?p=748">Denim Jackets</a></li>
                  <li><a href="https://codyhouse.co/?p=748">Duffle Coats</a></li>
                  <li><a href="https://codyhouse.co/?p=748">Leather Jackets</a></li>
                  <li><a href="https://codyhouse.co/?p=748">Parkas</a></li>
                </ul>
              </li>

              <li class="has-children">
                <a href="https://codyhouse.co/?p=748">Tops</a>

                <ul class="is-hidden">
                  <li class="go-back"><a href="#0">Clothing</a></li>
                  <li class="see-all"><a href="https://codyhouse.co/?p=748">All Tops</a></li>
                  <li><a href="https://codyhouse.co/?p=748">Cardigans</a></li>
                  <li><a href="https://codyhouse.co/?p=748">Coats</a></li>
                  <li><a href="https://codyhouse.co/?p=748">Polo Shirts</a></li>
                  <li><a href="https://codyhouse.co/?p=748">Shirts</a></li>
                  <li class="has-children">
                    <a href="#0">T-Shirts</a>

                    <ul class="is-hidden">
                      <li class="go-back"><a href="#0">Tops</a></li>
                      <li class="see-all"><a href="https://codyhouse.co/?p=748">All T-shirts</a></li>
                      <li><a href="https://codyhouse.co/?p=748">Plain</a></li>
                      <li><a href="https://codyhouse.co/?p=748">Print</a></li>
                      <li><a href="https://codyhouse.co/?p=748">Striped</a></li>
                      <li><a href="https://codyhouse.co/?p=748">Long sleeved</a></li>
                    </ul>
                  </li>
                  <li><a href="https://codyhouse.co/?p=748">Vests</a></li>
                </ul>
              </li>
            </ul>
            <!-- .cd-secondary-dropdown -->
          </li>
          <!-- .has-children -->

          <li class="has-children">
            <a href="https://codyhouse.co/?p=748">Gallery</a>

            <ul class="cd-dropdown-gallery is-hidden">
              <li class="go-back"><a href="#0">Menu</a></li>
              <li class="see-all"><a href="https://codyhouse.co/?p=748">Browse Gallery</a></li>
              <li>
                <a class="cd-dropdown-item" href="https://codyhouse.co/?p=748">
                  <img src="img/img.png" alt="Product Image">
                  <h3>Product #1</h3>
                </a>
              </li>

              <li>
                <a class="cd-dropdown-item" href="https://codyhouse.co/?p=748">
                  <img src="img/img.png" alt="Product Image">
                  <h3>Product #2</h3>
                </a>
              </li>

              <li>
                <a class="cd-dropdown-item" href="https://codyhouse.co/?p=748">
                  <img src="img/img.png" alt="Product Image">
                  <h3>Product #3</h3>
                </a>
              </li>

              <li>
                <a class="cd-dropdown-item" href="https://codyhouse.co/?p=748">
                  <img src="img/img.png" alt="Product Image">
                  <h3>Product #4</h3>
                </a>
              </li>
            </ul>
            <!-- .cd-dropdown-gallery -->
          </li>
          <!-- .has-children -->

          <li class="has-children">
            <a href="https://codyhouse.co/?p=748">Services</a>
            <ul class="cd-dropdown-icons is-hidden">
              <li class="go-back"><a href="#0">Menu</a></li>
              <li class="see-all"><a href="https://codyhouse.co/?p=748">Browse Services</a></li>
              <li>
                <a class="cd-dropdown-item item-1" href="https://codyhouse.co/?p=748">
                  <h3>Service #1</h3>
                  <p>This is the item description</p>
                </a>
              </li>

              <li>
                <a class="cd-dropdown-item item-2" href="https://codyhouse.co/?p=748">
                  <h3>Service #2</h3>
                  <p>This is the item description</p>
                </a>
              </li>

              <li>
                <a class="cd-dropdown-item item-3" href="https://codyhouse.co/?p=748">
                  <h3>Service #3</h3>
                  <p>This is the item description</p>
                </a>
              </li>

              <li>
                <a class="cd-dropdown-item item-4" href="https://codyhouse.co/?p=748">
                  <h3>Service #4</h3>
                  <p>This is the item description</p>
                </a>
              </li>

              <li>
                <a class="cd-dropdown-item item-5" href="https://codyhouse.co/?p=748">
                  <h3>Service #5</h3>
                  <p>This is the item description</p>
                </a>
              </li>

              <li>
                <a class="cd-dropdown-item item-6" href="https://codyhouse.co/?p=748">
                  <h3>Service #6</h3>
                  <p>This is the item description</p>
                </a>
              </li>

              <li>
                <a class="cd-dropdown-item item-7" href="https://codyhouse.co/?p=748">
                  <h3>Service #7</h3>
                  <p>This is the item description</p>
                </a>
              </li>

              <li>
                <a class="cd-dropdown-item item-8" href="https://codyhouse.co/?p=748">
                  <h3>Service #8</h3>
                  <p>This is the item description</p>
                </a>
              </li>

              <li>
                <a class="cd-dropdown-item item-9" href="https://codyhouse.co/?p=748">
                  <h3>Service #9</h3>
                  <p>This is the item description</p>
                </a>
              </li>

              <li>
                <a class="cd-dropdown-item item-10" href="https://codyhouse.co/?p=748">
                  <h3>Service #10</h3>
                  <p>This is the item description</p>
                </a>
              </li>

              <li>
                <a class="cd-dropdown-item item-11" href="https://codyhouse.co/?p=748">
                  <h3>Service #11</h3>
                  <p>This is the item description</p>
                </a>
              </li>

              <li>
                <a class="cd-dropdown-item item-12" href="https://codyhouse.co/?p=748">
                  <h3>Service #12</h3>
                  <p>This is the item description</p>
                </a>
              </li>

            </ul>
            <!-- .cd-dropdown-icons -->
          </li>
          <!-- .has-children -->

          <li class="cd-divider">Divider</li>

          <li><a href="https://codyhouse.co/?p=748">Page 1</a></li>
          <li><a href="https://codyhouse.co/?p=748">Page 2</a></li>
          <li><a href="https://codyhouse.co/?p=748">Page 3</a></li>
        </ul>
        <!-- .cd-dropdown-content -->
      </nav>
      <!-- .cd-dropdown -->
    </div>
    <!-- .cd-dropdown-wrapper -->
  </header>
              
            
!

CSS

              
                @charset "UTF-8";
/* -------------------------------- 

Primary style

-------------------------------- */
*, *::after, *::before {
  box-sizing: border-box;
}

html {
  font-size: 62.5%;
}

body {
  font-size: 1.6rem;
  font-family: sans-serif;
  color: #111433;
  background-color: #ffffff;
}

a {
  color: #3f8654;
  text-decoration: none;
}

img {
  max-width: 100%;
}

input {
  font-family: sans-serif;
  font-size: 1.6rem;
}

/* remove “X” from search input field */
input[type="search"]::-webkit-search-decoration,
input[type="search"]::-webkit-search-cancel-button,
input[type="search"]::-webkit-search-results-button,
input[type="search"]::-webkit-search-results-decoration {
  display: none;
}

input[type=text]::-ms-clear {
  display: none;
  width: 0;
  height: 0;
}

input[type=text]::-ms-reveal {
  display: none;
  width: 0;
  height: 0;
}

/* -------------------------------- 

Main Components 

-------------------------------- */
header {
  height: 100px;
  background: #ffffff;
}

.cd-dropdown-wrapper {
  display: inline-block;
  position: relative;
  height: 40px;
  margin: 30px 0 0 5%;
  -webkit-font-smoothing: antialiased;
  -moz-osx-font-smoothing: grayscale;
}

.cd-dropdown-trigger {
  display: block;
  position: relative;
  padding: 0 36px 0 20px;
  line-height: 40px;
  background-color: #111433;
  color: #ffffff;
  border-radius: 3px;
}
.no-touch .cd-dropdown-trigger:hover {
  background-color: #171b46;
}
.cd-dropdown-trigger::before, .cd-dropdown-trigger::after {
  /* this is the arrow inside the dropdown trigger*/
  content: '';
  position: absolute;
  top: 50%;
  margin-top: -1px;
  height: 2px;
  width: 9px;
  background: #ffffff;
  -webkit-backface-visibility: hidden;
  backface-visibility: hidden;
  -webkit-transition: width 0.3s, -webkit-transform 0.3s;
  -moz-transition: width 0.3s, -moz-transform 0.3s;
  transition: width 0.3s, transform 0.3s;
}
.cd-dropdown-trigger::before {
  right: 22px;
  -webkit-transform: rotate(45deg);
  -moz-transform: rotate(45deg);
  -ms-transform: rotate(45deg);
  -o-transform: rotate(45deg);
  transform: rotate(45deg);
}
.cd-dropdown-trigger::after {
  right: 17px;
  -webkit-transform: rotate(-45deg);
  -moz-transform: rotate(-45deg);
  -ms-transform: rotate(-45deg);
  -o-transform: rotate(-45deg);
  transform: rotate(-45deg);
}
@media only screen and (min-width: 1024px) {
  .cd-dropdown-trigger {
    font-size: 1.5rem;
  }
  .cd-dropdown-trigger.dropdown-is-active {
    background-color: #3f8654;
  }
  .no-touch .cd-dropdown-trigger.dropdown-is-active:hover {
    background-color: #47975f;
  }
  .cd-dropdown-trigger.dropdown-is-active::before, .cd-dropdown-trigger.dropdown-is-active::after {
    /* transform the arrow into a 'X' */
    width: 14px;
  }
  .cd-dropdown-trigger.dropdown-is-active::before {
    /* transform the arrow into a 'X' */
    -webkit-transform: translateX(5px) rotate(-45deg);
    -moz-transform: translateX(5px) rotate(-45deg);
    -ms-transform: translateX(5px) rotate(-45deg);
    -o-transform: translateX(5px) rotate(-45deg);
    transform: translateX(5px) rotate(-45deg);
  }
  .cd-dropdown-trigger.dropdown-is-active::after {
    /* transform the arrow into a 'X' */
    -webkit-transform: rotate(45deg);
    -moz-transform: rotate(45deg);
    -ms-transform: rotate(45deg);
    -o-transform: rotate(45deg);
    transform: rotate(45deg);
  }
}

.cd-dropdown h2,
.cd-dropdown-content a,
.cd-dropdown-content ul a {
  height: 50px;
  line-height: 50px;
}
@media only screen and (min-width: 768px) {
  .cd-dropdown h2,
  .cd-dropdown-content a,
  .cd-dropdown-content ul a {
    height: 60px;
    line-height: 60px;
  }
}
@media only screen and (min-width: 1024px) {
  .cd-dropdown h2,
  .cd-dropdown-content a,
  .cd-dropdown-content ul a {
    height: 50px;
    line-height: 50px;
  }
}

.cd-dropdown h2,
.cd-dropdown-content a,
.cd-dropdown-content ul a,
.cd-dropdown-content .cd-divider {
  padding: 0 20px;
}

.cd-dropdown {
  position: fixed;
  z-index: 1;
  top: 0;
  left: 0;
  width: 100%;
  height: 100%;
  background-color: #111433;
  color: #ffffff;
  visibility: hidden;
  /* Force Hardware Acceleration */
  -webkit-backface-visibility: hidden;
  backface-visibility: hidden;
  -webkit-transform: translateZ(0);
  -moz-transform: translateZ(0);
  -ms-transform: translateZ(0);
  -o-transform: translateZ(0);
  transform: translateZ(0);
  -webkit-transform: translateY(-100%);
  -moz-transform: translateY(-100%);
  -ms-transform: translateY(-100%);
  -o-transform: translateY(-100%);
  transform: translateY(-100%);
  -webkit-transition: -webkit-transform 0.5s 0s, visibility 0s 0.5s;
  -moz-transition: -moz-transform 0.5s 0s, visibility 0s 0.5s;
  transition: transform 0.5s 0s, visibility 0s 0.5s;
}
.cd-dropdown h2 {
  /* dropdown title - mobile version only */
  position: relative;
  z-index: 1;
  color: #585a70;
  background-color: #111433;
  border-bottom: 1px solid #242643;
}
.cd-dropdown .cd-close {
  /* 'X' close icon - mobile version only */
  position: absolute;
  z-index: 1;
  right: 0;
  top: 0;
  height: 50px;
  width: 50px;
  /* image replacement */
  overflow: hidden;
  text-indent: 100%;
  white-space: nowrap;
  color: transparent;
}
.cd-dropdown .cd-close::after, .cd-dropdown .cd-close::before {
  /* this is the 'X' icon */
  content: '';
  position: absolute;
  left: 50%;
  top: 50%;
  bottom: auto;
  right: auto;
  -webkit-transform: translateX(-50%) translateY(-50%);
  -moz-transform: translateX(-50%) translateY(-50%);
  -ms-transform: translateX(-50%) translateY(-50%);
  -o-transform: translateX(-50%) translateY(-50%);
  transform: translateX(-50%) translateY(-50%);
  height: 20px;
  width: 2px;
  background-color: #ffffff;
}
.cd-dropdown .cd-close::after {
  -webkit-transform: translateX(-50%) translateY(-50%) rotate(45deg);
  -moz-transform: translateX(-50%) translateY(-50%) rotate(45deg);
  -ms-transform: translateX(-50%) translateY(-50%) rotate(45deg);
  -o-transform: translateX(-50%) translateY(-50%) rotate(45deg);
  transform: translateX(-50%) translateY(-50%) rotate(45deg);
}
.cd-dropdown .cd-close::before {
  -webkit-transform: translateX(-50%) translateY(-50%) rotate(-45deg);
  -moz-transform: translateX(-50%) translateY(-50%) rotate(-45deg);
  -ms-transform: translateX(-50%) translateY(-50%) rotate(-45deg);
  -o-transform: translateX(-50%) translateY(-50%) rotate(-45deg);
  transform: translateX(-50%) translateY(-50%) rotate(-45deg);
}
.cd-dropdown.dropdown-is-active {
  visibility: visible;
  -webkit-transform: translateY(0);
  -moz-transform: translateY(0);
  -ms-transform: translateY(0);
  -o-transform: translateY(0);
  transform: translateY(0);
  -webkit-transition: -webkit-transform 0.5s 0s, visibility 0s 0s;
  -moz-transition: -moz-transform 0.5s 0s, visibility 0s 0s;
  transition: transform 0.5s 0s, visibility 0s 0s;
}
@media only screen and (min-width: 768px) {
  .cd-dropdown .cd-close {
    top: 5px;
  }
}
@media only screen and (min-width: 1024px) {
  .cd-dropdown {
    position: absolute;
    top: calc(100% - 2px);
    /* reset style*/
    height: auto;
    width: auto;
    -webkit-transform: translateX(0);
    -moz-transform: translateX(0);
    -ms-transform: translateX(0);
    -o-transform: translateX(0);
    transform: translateX(0);
    background-color: #ffffff;
    color: #111433;
    box-shadow: 0 4px 12px rgba(0, 0, 0, 0.1);
    opacity: 0;
    -webkit-transform: translateY(30px);
    -moz-transform: translateY(30px);
    -ms-transform: translateY(30px);
    -o-transform: translateY(30px);
    transform: translateY(30px);
    -webkit-transition: opacity 0.3s 0s, visibility 0s 0.3s, -webkit-transform 0.3s 0s;
    -moz-transition: opacity 0.3s 0s, visibility 0s 0.3s, -moz-transform 0.3s 0s;
    transition: opacity 0.3s 0s, visibility 0s 0.3s, transform 0.3s 0s;
  }
  .open-to-left .cd-dropdown {
    /* use the .open-to-left class if you want to open the dropdown on the left */
    right: 0;
    left: auto;
  }
  .cd-dropdown h2, .cd-dropdown .cd-close {
    /* on desktop - hide title and 'X' */
    display: none;
  }
  .cd-dropdown.dropdown-is-active {
    opacity: 1;
    -webkit-transform: translateY(0);
    -moz-transform: translateY(0);
    -ms-transform: translateY(0);
    -o-transform: translateY(0);
    transform: translateY(0);
    -webkit-transition: opacity 0.3s 0s, visibility 0.3s 0s, -webkit-transform 0.3s 0s;
    -moz-transition: opacity 0.3s 0s, visibility 0.3s 0s, -moz-transform 0.3s 0s;
    transition: opacity 0.3s 0s, visibility 0.3s 0s, transform 0.3s 0s;
  }
}

.cd-dropdown-content, .cd-dropdown-content ul {
  position: absolute;
  top: 0;
  left: 0;
  width: 100%;
  height: 100%;
  overflow-x: hidden;
  overflow-y: auto;
  -webkit-transition: -webkit-transform 0.3s;
  -moz-transition: -moz-transform 0.3s;
  transition: transform 0.3s;
  padding-top: 50px;
}
.cd-dropdown-content a, .cd-dropdown-content ul a {
  display: block;
  color: #ffffff;
  /* truncate text with ellipsis if too long */
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
  border-top-width: 1px;
  border-color: #242643;
  border-style: solid;
}
.cd-dropdown-content li:first-of-type > a, .cd-dropdown-content ul li:first-of-type > a {
  border-top-width: 0;
}
.cd-dropdown-content li:last-of-type > a, .cd-dropdown-content ul li:last-of-type > a {
  border-bottom-width: 1px;
}
.cd-dropdown-content .cd-divider, .cd-dropdown-content ul .cd-divider {
  padding-top: 10px;
  padding-bottom: 10px;
  background-color: #0b0e23;
  font-size: 1.1rem;
  font-weight: bold;
  letter-spacing: 1px;
  color: #585a70;
  text-transform: uppercase;
}
.cd-dropdown-content .cd-divider + li > a, .cd-dropdown-content ul .cd-divider + li > a {
  border-top-width: 0;
}
.cd-dropdown-content a, .cd-dropdown-content .cd-search, .cd-dropdown-content .cd-divider, .cd-dropdown-content ul a, .cd-dropdown-content ul .cd-search, .cd-dropdown-content ul .cd-divider {
  /* Force Hardware Acceleration */
  -webkit-transform: translateZ(0);
  -moz-transform: translateZ(0);
  -ms-transform: translateZ(0);
  -o-transform: translateZ(0);
  transform: translateZ(0);
  -webkit-backface-visibility: hidden;
  backface-visibility: hidden;
  -webkit-transition: opacity 0.3s, -webkit-transform 0.3s;
  -moz-transition: opacity 0.3s, -moz-transform 0.3s;
  transition: opacity 0.3s, transform 0.3s;
}
.cd-dropdown-content.is-hidden, .cd-dropdown-content ul.is-hidden {
  /* push the secondary dropdown items to the right */
  -webkit-transform: translateX(100%);
  -moz-transform: translateX(100%);
  -ms-transform: translateX(100%);
  -o-transform: translateX(100%);
  transform: translateX(100%);
}
.cd-dropdown-content.is-hidden > li > a, .cd-dropdown-content.is-hidden > li > .cd-search, .cd-dropdown-content.is-hidden > .cd-divider, .cd-dropdown-content.move-out > li > a, .cd-dropdown-content.move-out > li > .cd-search, .cd-dropdown-content.move-out > .cd-divider, .cd-dropdown-content ul.is-hidden > li > a, .cd-dropdown-content ul.is-hidden > li > .cd-search, .cd-dropdown-content ul.is-hidden > .cd-divider, .cd-dropdown-content ul.move-out > li > a, .cd-dropdown-content ul.move-out > li > .cd-search, .cd-dropdown-content ul.move-out > .cd-divider {
  /* lower down the dropdown items opacity - when secondary dropdown slides in or for dropdown items hidden on the right */
  opacity: 0;
}
.cd-dropdown-content.move-out > li > a, .cd-dropdown-content.move-out > li > .cd-search, .cd-dropdown-content.move-out > .cd-divider, .cd-dropdown-content ul.move-out > li > a, .cd-dropdown-content ul.move-out > li > .cd-search, .cd-dropdown-content ul.move-out > .cd-divider {
  /* push the dropdown items to the left when secondary dropdown slides in */
  -webkit-transform: translateX(-100%);
  -moz-transform: translateX(-100%);
  -ms-transform: translateX(-100%);
  -o-transform: translateX(-100%);
  transform: translateX(-100%);
}
.dropdown-is-active .cd-dropdown-content, .dropdown-is-active .cd-dropdown-content ul {
  -webkit-overflow-scrolling: touch;
}
@media only screen and (min-width: 768px) {
  .cd-dropdown-content, .cd-dropdown-content ul {
    padding-top: 60px;
  }
  .cd-dropdown-content a, .cd-dropdown-content ul a {
    font-size: 1.8rem;
  }
}
@media only screen and (min-width: 1024px) {
  .cd-dropdown-content, .cd-dropdown-content ul {
    padding-top: 0;
    overflow: visible;
  }
  .cd-dropdown-content a, .cd-dropdown-content ul a {
    color: #111433;
    height: 50px;
    line-height: 50px;
    font-size: 1.5rem;
    border-color: #ebebeb;
  }
  .cd-dropdown-content .cd-divider, .cd-dropdown-content ul .cd-divider {
    background-color: transparent;
    color: #b3b3b3;
    border-top: 1px solid #ebebeb;
  }
  .cd-dropdown-content .cd-divider + li > a, .cd-dropdown-content ul .cd-divider + li > a {
    border-top-width: 1px;
  }
  .cd-dropdown-content.is-hidden > li > a, .cd-dropdown-content.is-hidden > li > .cd-search, .cd-dropdown-content.is-hidden > .cd-divider, .cd-dropdown-content.move-out > li > a, .cd-dropdown-content.move-out > li > .cd-search, .cd-dropdown-content.move-out > .cd-divider, .cd-dropdown-content ul.is-hidden > li > a, .cd-dropdown-content ul.is-hidden > li > .cd-search, .cd-dropdown-content ul.is-hidden > .cd-divider, .cd-dropdown-content ul.move-out > li > a, .cd-dropdown-content ul.move-out > li > .cd-search, .cd-dropdown-content ul.move-out > .cd-divider {
    /* reset mobile style */
    opacity: 1;
  }
}

.cd-dropdown-content .see-all a {
  /* different style for the See all links */
  color: #3f8654;
}
.cd-dropdown-content .cd-dropdown-gallery .cd-dropdown-item, .cd-dropdown-content .cd-dropdown-icons .cd-dropdown-item {
  /* items with picture (or icon) and title */
  height: 80px;
  line-height: 80px;
}
.cd-dropdown-content .cd-dropdown-gallery .cd-dropdown-item h3, .cd-dropdown-content .cd-dropdown-icons .cd-dropdown-item h3 {
  /* truncate text with ellipsis if too long */
  overflow: hidden;
  text-overflow: ellipsis;
  white-space: nowrap;
}
.cd-dropdown-content .cd-dropdown-gallery .cd-dropdown-item {
  padding-left: 90px;
}
.cd-dropdown-content .cd-dropdown-gallery img {
  position: absolute;
  display: block;
  height: 40px;
  width: auto;
  left: 20px;
  top: 50%;
  margin-top: -20px;
}
.cd-dropdown-content .cd-dropdown-icons .cd-dropdown-item {
  padding-left: 75px;
  position: relative;
}
.cd-dropdown-content .cd-dropdown-icons .cd-dropdown-item p {
  color: #111433;
  font-size: 1.3rem;
  /* hide description on small devices */
  display: none;
}
.cd-dropdown-content .cd-dropdown-icons .cd-dropdown-item::before {
  /* item icon */
  content: '';
  display: block;
  position: absolute;
  left: 20px;
  top: 50%;
  margin-top: -20px;
  width: 40px;
  height: 40px;
  background-repeat: no-repeat;
  background-position: center center;
  background-size: 40px 40px;
}
.cd-dropdown-content .cd-dropdown-icons .cd-dropdown-item.item-1::before {
  background-image: url("../img/nucleo-icon-1.svg");
}
.cd-dropdown-content .cd-dropdown-icons .cd-dropdown-item.item-2::before {
  background-image: url("../img/nucleo-icon-2.svg");
}
.cd-dropdown-content .cd-dropdown-icons .cd-dropdown-item.item-3::before {
  background-image: url("../img/nucleo-icon-3.svg");
}
.cd-dropdown-content .cd-dropdown-icons .cd-dropdown-item.item-4::before {
  background-image: url("../img/nucleo-icon-4.svg");
}
.cd-dropdown-content .cd-dropdown-icons .cd-dropdown-item.item-5::before {
  background-image: url("../img/nucleo-icon-5.svg");
}
.cd-dropdown-content .cd-dropdown-icons .cd-dropdown-item.item-6::before {
  background-image: url("../img/nucleo-icon-6.svg");
}
.cd-dropdown-content .cd-dropdown-icons .cd-dropdown-item.item-7::before {
  background-image: url("../img/nucleo-icon-7.svg");
}
.cd-dropdown-content .cd-dropdown-icons .cd-dropdown-item.item-8::before {
  background-image: url("../img/nucleo-icon-8.svg");
}
.cd-dropdown-content .cd-dropdown-icons .cd-dropdown-item.item-9::before {
  background-image: url("../img/nucleo-icon-9.svg");
}
.cd-dropdown-content .cd-dropdown-icons .cd-dropdown-item.item-10::before {
  background-image: url("../img/nucleo-icon-10.svg");
}
.cd-dropdown-content .cd-dropdown-icons .cd-dropdown-item.item-11::before {
  background-image: url("../img/nucleo-icon-11.svg");
}
.cd-dropdown-content .cd-dropdown-icons .cd-dropdown-item.item-12::before {
  background-image: url("../img/nucleo-icon-12.svg");
}
@media only screen and (min-width: 1024px) {
  .cd-dropdown-content {
    /* reset mobile style */
    position: static;
    height: auto;
    width: 280px;
  }
  .cd-dropdown-content > li:last-of-type a {
    border-bottom: none;
  }
  .no-touch .cd-dropdown-content > li:not(.has-children) a:hover {
    color: #3f8654;
  }
  .cd-dropdown-content.move-out > li > a, .cd-dropdown-content.move-out > li > .cd-search, .cd-dropdown-content.move-out > .cd-divider {
    /* reset mobile style */
    -webkit-transform: translateX(0);
    -moz-transform: translateX(0);
    -ms-transform: translateX(0);
    -o-transform: translateX(0);
    transform: translateX(0);
    opacity: 1;
  }
  .cd-dropdown-content .cd-secondary-dropdown, .cd-dropdown-content .cd-dropdown-gallery, .cd-dropdown-content .cd-dropdown-icons {
    -webkit-transform: translateX(0);
    -moz-transform: translateX(0);
    -ms-transform: translateX(0);
    -o-transform: translateX(0);
    transform: translateX(0);
    left: 100%;
    height: auto;
    background-color: #ffffff;
    box-shadow: 0 2px 14px rgba(0, 0, 0, 0.1);
  }
  .cd-dropdown-content .cd-secondary-dropdown::after, .cd-dropdown-content .cd-dropdown-gallery::after, .cd-dropdown-content .cd-dropdown-icons::after {
    clear: both;
    content: "";
    display: table;
  }
  .open-to-left .cd-dropdown-content .cd-secondary-dropdown, .open-to-left .cd-dropdown-content .cd-dropdown-gallery, .open-to-left .cd-dropdown-content .cd-dropdown-icons {
    /* use the .open-to-left class if you want to open the dropdown on the left */
    left: auto;
    right: 100%;
  }
  .cd-dropdown-content .cd-secondary-dropdown.is-hidden, .cd-dropdown-content .cd-dropdown-gallery.is-hidden, .cd-dropdown-content .cd-dropdown-icons.is-hidden {
    /* reset mobile style */
    -webkit-transform: translateX(0);
    -moz-transform: translateX(0);
    -ms-transform: translateX(0);
    -o-transform: translateX(0);
    transform: translateX(0);
  }
  .cd-dropdown-content .cd-secondary-dropdown.fade-in, .cd-dropdown-content .cd-dropdown-gallery.fade-in, .cd-dropdown-content .cd-dropdown-icons.fade-in {
    /* animate secondary dropdown items when hovering over of of the .cd-dropdown-content list items */
    -webkit-animation: cd-fade-in 0.2s;
    -moz-animation: cd-fade-in 0.2s;
    animation: cd-fade-in 0.2s;
  }
  .cd-dropdown-content .cd-secondary-dropdown.fade-out, .cd-dropdown-content .cd-dropdown-gallery.fade-out, .cd-dropdown-content .cd-dropdown-icons.fade-out {
    /* animate secondary dropdown items when hovering over of of the .cd-dropdown-content list items */
    -webkit-animation: cd-fade-out 0.2s;
    -moz-animation: cd-fade-out 0.2s;
    animation: cd-fade-out 0.2s;
  }
  .cd-dropdown-content .cd-secondary-dropdown > .go-back, .cd-dropdown-content .cd-dropdown-gallery > .go-back, .cd-dropdown-content .cd-dropdown-icons > .go-back {
    display: none;
  }
  .cd-dropdown-content .cd-secondary-dropdown > .see-all, .cd-dropdown-content .cd-dropdown-gallery > .see-all, .cd-dropdown-content .cd-dropdown-icons > .see-all {
    position: absolute;
    bottom: 20px;
    height: 45px;
    text-align: center;
  }
  .cd-dropdown-content .cd-secondary-dropdown > .see-all a, .cd-dropdown-content .cd-dropdown-gallery > .see-all a, .cd-dropdown-content .cd-dropdown-icons > .see-all a {
    margin: 0;
    height: 100%;
    line-height: 45px;
    background: #ebebeb;
    pointer-events: auto;
    -webkit-transition: color 0.2s, background-color 0.2s;
    -moz-transition: color 0.2s, background-color 0.2s;
    transition: color 0.2s, background-color 0.2s;
  }
  .no-touch .cd-dropdown-content .cd-secondary-dropdown > .see-all a:hover, .no-touch .cd-dropdown-content .cd-dropdown-gallery > .see-all a:hover, .no-touch .cd-dropdown-content .cd-dropdown-icons > .see-all a:hover {
    color: #ffffff;
    background-color: #111433;
  }
  .cd-dropdown-content .cd-secondary-dropdown .cd-dropdown-item, .cd-dropdown-content .cd-secondary-dropdown a, .cd-dropdown-content .cd-dropdown-gallery .cd-dropdown-item, .cd-dropdown-content .cd-dropdown-gallery a, .cd-dropdown-content .cd-dropdown-icons .cd-dropdown-item, .cd-dropdown-content .cd-dropdown-icons a {
    border: none;
  }
  .cd-dropdown-content .cd-dropdown-gallery, .cd-dropdown-content .cd-dropdown-icons {
    padding: 20px 30px 100px;
  }
  .cd-dropdown-content .cd-dropdown-gallery > .see-all, .cd-dropdown-content .cd-dropdown-icons > .see-all {
    width: calc(100% - 60px);
  }
  .cd-dropdown-content .cd-dropdown-icons > li, .cd-dropdown-content .cd-secondary-dropdown > li {
    width: 50%;
    float: left;
  }
  .cd-dropdown-content .cd-secondary-dropdown {
    overflow: hidden;
    width: 550px;
    padding-bottom: 65px;
  }
  .cd-dropdown-content .cd-secondary-dropdown::before {
    /* this is the separation line in the middle of the .cd-secondary-dropdown element */
    position: absolute;
    content: '';
    top: 290px;
    left: 15px;
    height: 1px;
    width: 520px;
    background-color: #ebebeb;
  }
  .cd-dropdown-content .cd-secondary-dropdown > li > a {
    color: #3f8654;
    font-size: 1.6rem;
    margin-bottom: 10px;
    line-height: 30px;
    height: 30px;
    pointer-events: none;
  }
  .cd-dropdown-content .cd-secondary-dropdown > li > a::after, .cd-dropdown-content .cd-secondary-dropdown > li > a::before {
    /* hide the arrow */
    display: none;
  }
  .cd-dropdown-content .cd-secondary-dropdown.move-out > li > a {
    /* reset mobile style */
    -webkit-transform: translateX(0);
    -moz-transform: translateX(0);
    -ms-transform: translateX(0);
    -o-transform: translateX(0);
    transform: translateX(0);
  }
  .cd-dropdown-content .cd-secondary-dropdown > li {
    margin: 20px 0;
    border-right-width: 1px;
    border-color: #ebebeb;
    border-style: solid;
    padding: 0 30px;
    height: 250px;
  }
  .cd-dropdown-content .cd-secondary-dropdown > li:nth-of-type(2n) {
    border-right-width: 0;
  }
  .cd-dropdown-content .cd-secondary-dropdown > li > ul {
    /* reset mobile style */
    -webkit-transform: translate(0);
    -moz-transform: translate(0);
    -ms-transform: translate(0);
    -o-transform: translate(0);
    transform: translate(0);
    position: relative;
    height: auto;
  }
  .cd-dropdown-content .cd-secondary-dropdown > li > ul > .go-back {
    display: none;
  }
  .cd-dropdown-content .cd-secondary-dropdown a {
    line-height: 25px;
    height: 25px;
    font-size: 1.3rem;
    padding-left: 0;
  }
  .no-touch .cd-dropdown-content .cd-secondary-dropdown a:hover {
    color: #3f8654;
  }
  .cd-dropdown-content .cd-secondary-dropdown ul {
    padding-bottom: 25px;
    overflow: hidden;
    height: auto;
  }
  .cd-dropdown-content .cd-secondary-dropdown .go-back a {
    padding-left: 20px;
    color: transparent;
  }
  .no-touch .cd-dropdown-content .cd-secondary-dropdown .go-back a:hover {
    color: transparent;
  }
  .cd-dropdown-content .cd-secondary-dropdown .go-back a::before, .cd-dropdown-content .cd-secondary-dropdown .go-back a::after {
    left: 0;
  }
  .cd-dropdown-content .cd-secondary-dropdown .see-all {
    position: absolute;
    bottom: 0;
    left: 0;
    width: 100%;
  }
  .cd-dropdown-content .cd-dropdown-gallery {
    width: 600px;
    padding-bottom: 100px;
  }
  .cd-dropdown-content .cd-dropdown-gallery > li {
    width: 48%;
    float: left;
    margin-right: 4%;
  }
  .cd-dropdown-content .cd-dropdown-gallery > li:nth-of-type(2n) {
    margin-right: 0;
  }
  .cd-dropdown-content .cd-dropdown-gallery .cd-dropdown-item {
    padding: 0;
    height: auto;
    line-height: normal;
    color: #3f8654;
    margin-bottom: 2em;
  }
  .cd-dropdown-content .cd-dropdown-gallery > li:nth-last-of-type(2) a,
  .cd-dropdown-content .cd-dropdown-gallery > li:last-of-type a {
    margin-bottom: 0;
  }
  .cd-dropdown-content .cd-dropdown-gallery img {
    position: static;
    height: auto;
    width: 100%;
    margin: 0 0 0.6em;
  }
  .cd-dropdown-content .cd-dropdown-icons {
    width: 600px;
  }
  .cd-dropdown-content .cd-dropdown-icons .cd-dropdown-item {
    height: 80px;
    line-height: 1.2;
    padding: 24px 0 0 85px;
  }
  .cd-dropdown-content .cd-dropdown-icons .cd-dropdown-item:hover {
    background: #ebebeb;
  }
  .cd-dropdown-content .cd-dropdown-icons .cd-dropdown-item h3 {
    color: #3f8654;
    font-weight: bold;
  }
  .cd-dropdown-content .cd-dropdown-icons .cd-dropdown-item p {
    display: block;
    font-size: 1.2rem;
  }
  .cd-dropdown-content .cd-dropdown-icons .cd-dropdown-item::before {
    left: 25px;
  }
  .cd-dropdown-content > .has-children > ul {
    visibility: hidden;
  }
  .cd-dropdown-content > .has-children > ul.is-active {
    /* when hover over .cd-dropdown-content items - show subnavigation */
    visibility: visible;
  }
  .cd-dropdown-content > .has-children > .cd-secondary-dropdown.is-active > li > ul {
    /* if .cd-secondary-dropdown is visible - show also subnavigation */
    visibility: visible;
  }
  .cd-dropdown-content > .has-children > a.is-active {
    /* hover effect for .cd-dropdown-content items with subnavigation */
    box-shadow: inset 2px 0 0 #3f8654;
    color: #3f8654;
  }
  .cd-dropdown-content > .has-children > a.is-active::before, .cd-dropdown-content > .has-children > a.is-active::after {
    background: #3f8654;
  }
  .open-to-left .cd-dropdown-content > .has-children > a.is-active {
    box-shadow: inset -2px 0 0 #3f8654;
  }
}

@-webkit-keyframes cd-fade-in {
  0% {
    opacity: 0;
    visibility: visible;
  }
  100% {
    opacity: 1;
    visibility: visible;
  }
}
@-moz-keyframes cd-fade-in {
  0% {
    opacity: 0;
    visibility: visible;
  }
  100% {
    opacity: 1;
    visibility: visible;
  }
}
@keyframes cd-fade-in {
  0% {
    opacity: 0;
    visibility: visible;
  }
  100% {
    opacity: 1;
    visibility: visible;
  }
}
@-webkit-keyframes cd-fade-out {
  0% {
    opacity: 1;
    visibility: visible;
  }
  100% {
    opacity: 0;
    visibility: visible;
  }
}
@-moz-keyframes cd-fade-out {
  0% {
    opacity: 1;
    visibility: visible;
  }
  100% {
    opacity: 0;
    visibility: visible;
  }
}
@keyframes cd-fade-out {
  0% {
    opacity: 1;
    visibility: visible;
  }
  100% {
    opacity: 0;
    visibility: visible;
  }
}
.cd-search input[type="search"] {
  width: 100%;
  height: 50px;
  padding: 0 20px;
  -webkit-appearance: none;
  -moz-appearance: none;
  -ms-appearance: none;
  -o-appearance: none;
  appearance: none;
  background-color: #242643;
  color: #ffffff;
  border: none;
  border-radius: 0;
}
.cd-search input[type="search"]::-webkit-input-placeholder {
  color: #ffffff;
}
.cd-search input[type="search"]::-moz-placeholder {
  color: #ffffff;
}
.cd-search input[type="search"]:-moz-placeholder {
  color: #ffffff;
}
.cd-search input[type="search"]:-ms-input-placeholder {
  color: #ffffff;
}
.cd-search input[type="search"]:focus {
  background: #ffffff;
  color: #111433;
  outline: none;
}
.cd-search input[type="search"]:focus::-webkit-input-placeholder {
  color: rgba(17, 20, 51, 0.4);
}
.cd-search input[type="search"]:focus::-moz-placeholder {
  color: rgba(17, 20, 51, 0.4);
}
.cd-search input[type="search"]:focus:-moz-placeholder {
  color: rgba(17, 20, 51, 0.4);
}
.cd-search input[type="search"]:focus:-ms-input-placeholder {
  color: rgba(17, 20, 51, 0.4);
}
@media only screen and (min-width: 1024px) {
  .cd-search input[type="search"] {
    background-color: #ebebeb;
  }
  .cd-search input[type="search"]::-webkit-input-placeholder {
    color: #b3b3b3;
  }
  .cd-search input[type="search"]::-moz-placeholder {
    color: #b3b3b3;
  }
  .cd-search input[type="search"]:-moz-placeholder {
    color: #b3b3b3;
  }
  .cd-search input[type="search"]:-ms-input-placeholder {
    color: #b3b3b3;
  }
}

.has-children > a, .go-back a {
  position: relative;
}
.has-children > a::before, .has-children > a::after, .go-back a::before, .go-back a::after {
  /* arrow icon in CSS - for element with nested unordered lists */
  content: '';
  position: absolute;
  top: 50%;
  margin-top: -1px;
  display: inline-block;
  height: 2px;
  width: 10px;
  background: #ffffff;
  -webkit-backface-visibility: hidden;
  backface-visibility: hidden;
}
.has-children > a::before, .go-back a::before {
  -webkit-transform: rotate(45deg);
  -moz-transform: rotate(45deg);
  -ms-transform: rotate(45deg);
  -o-transform: rotate(45deg);
  transform: rotate(45deg);
}
.has-children > a::after, .go-back a::after {
  -webkit-transform: rotate(-45deg);
  -moz-transform: rotate(-45deg);
  -ms-transform: rotate(-45deg);
  -o-transform: rotate(-45deg);
  transform: rotate(-45deg);
}
@media only screen and (min-width: 1024px) {
  .has-children > a::before, .has-children > a::after, .go-back a::before, .go-back a::after {
    background: #b3b3b3;
  }
}

.has-children > a {
  padding-right: 40px;
}
.has-children > a::before, .has-children > a::after {
  /* arrow goes on the right side - children navigation */
  right: 20px;
  -webkit-transform-origin: 9px 50%;
  -moz-transform-origin: 9px 50%;
  -ms-transform-origin: 9px 50%;
  -o-transform-origin: 9px 50%;
  transform-origin: 9px 50%;
}

@media only screen and (min-width: 1024px) {
  .open-to-left .cd-dropdown-content > .has-children > a {
    padding-left: 40px;
    padding-right: 20px;
  }
  .open-to-left .cd-dropdown-content > .has-children > a::before, .open-to-left .cd-dropdown-content > .has-children > a::after {
    right: auto;
    left: 20px;
    -webkit-transform-origin: 1px 50%;
    -moz-transform-origin: 1px 50%;
    -ms-transform-origin: 1px 50%;
    -o-transform-origin: 1px 50%;
    transform-origin: 1px 50%;
  }
}
.cd-dropdown-content .go-back a {
  padding-left: 40px;
}
.cd-dropdown-content .go-back a::before, .cd-dropdown-content .go-back a::after {
  /* arrow goes on the left side - go back button */
  left: 20px;
  -webkit-transform-origin: 1px 50%;
  -moz-transform-origin: 1px 50%;
  -ms-transform-origin: 1px 50%;
  -o-transform-origin: 1px 50%;
  transform-origin: 1px 50%;
}

.cd-main-content {
  background-color: #e6e6e6;
  min-height: calc(100vh - 100px);
  padding: 2em 5%;
  line-height: 2;
}

.no-js .cd-dropdown-wrapper:hover .cd-dropdown {
  visibility: visible;
  opacity: 1;
  -webkit-transform: translateY(0);
  -moz-transform: translateY(0);
  -ms-transform: translateY(0);
  -o-transform: translateY(0);
  transform: translateY(0);
}

.no-js .cd-dropdown-wrapper .cd-close {
  display: none;
}

              
            
!

JS

              
                /**
 * menu-aim is a jQuery plugin for dropdown menus that can differentiate
 * between a user trying hover over a dropdown item vs trying to navigate into
 * a submenu's contents.
 *
 * menu-aim assumes that you have are using a menu with submenus that expand
 * to the menu's right. It will fire events when the user's mouse enters a new
 * dropdown item *and* when that item is being intentionally hovered over.
 *
 * __________________________
 * | Monkeys  >|   Gorilla  |
 * | Gorillas >|   Content  |
 * | Chimps   >|   Here     |
 * |___________|____________|
 *
 * In the above example, "Gorillas" is selected and its submenu content is
 * being shown on the right. Imagine that the user's cursor is hovering over
 * "Gorillas." When they move their mouse into the "Gorilla Content" area, they
 * may briefly hover over "Chimps." This shouldn't close the "Gorilla Content"
 * area.
 *
 * This problem is normally solved using timeouts and delays. menu-aim tries to
 * solve this by detecting the direction of the user's mouse movement. This can
 * make for quicker transitions when navigating up and down the menu. The
 * experience is hopefully similar to amazon.com/'s "Shop by Department"
 * dropdown.
 *
 * Use like so:
 *
 *      $("#menu").menuAim({
 *          activate: $.noop,  // fired on row activation
 *          deactivate: $.noop  // fired on row deactivation
 *      });
 *
 *  ...to receive events when a menu's row has been purposefully (de)activated.
 *
 * The following options can be passed to menuAim. All functions execute with
 * the relevant row's HTML element as the execution context ('this'):
 *
 *      .menuAim({
 *          // Function to call when a row is purposefully activated. Use this
 *          // to show a submenu's content for the activated row.
 *          activate: function() {},
 *
 *          // Function to call when a row is deactivated.
 *          deactivate: function() {},
 *
 *          // Function to call when mouse enters a menu row. Entering a row
 *          // does not mean the row has been activated, as the user may be
 *          // mousing over to a submenu.
 *          enter: function() {},
 *
 *          // Function to call when mouse exits a menu row.
 *          exit: function() {},
 *
 *          // Selector for identifying which elements in the menu are rows
 *          // that can trigger the above events. Defaults to "> li".
 *          rowSelector: "> li",
 *
 *          // You may have some menu rows that aren't submenus and therefore
 *          // shouldn't ever need to "activate." If so, filter submenu rows w/
 *          // this selector. Defaults to "*" (all elements).
 *          submenuSelector: "*",
 *
 *          // Direction the submenu opens relative to the main menu. Can be
 *          // left, right, above, or below. Defaults to "right".
 *          submenuDirection: "right"
 *      });
 *
 * https://github.com/kamens/jQuery-menu-aim
 * MIT License
*/
(function($) {

    $.fn.menuAim = function(opts) {
        // Initialize menu-aim for all elements in jQuery collection
        this.each(function() {
            init.call(this, opts);
        });

        return this;
    };

    function init(opts) {
        var $menu = $(this),
            activeRow = null,
            mouseLocs = [],
            lastDelayLoc = null,
            timeoutId = null,
            options = $.extend({
                rowSelector: "> li",
                submenuSelector: "*",
                submenuDirection: "right",
                tolerance: 75,  // bigger = more forgivey when entering submenu
                enter: $.noop,
                exit: $.noop,
                activate: $.noop,
                deactivate: $.noop,
                exitMenu: $.noop
            }, opts);

        var MOUSE_LOCS_TRACKED = 3,  // number of past mouse locations to track
            DELAY = 300;  // ms delay when user appears to be entering submenu

        /**
         * Keep track of the last few locations of the mouse.
         */
        var mousemoveDocument = function(e) {
                mouseLocs.push({x: e.pageX, y: e.pageY});

                if (mouseLocs.length > MOUSE_LOCS_TRACKED) {
                    mouseLocs.shift();
                }
            };

        /**
         * Cancel possible row activations when leaving the menu entirely
         */
        var mouseleaveMenu = function() {
                if (timeoutId) {
                    clearTimeout(timeoutId);
                }

                // If exitMenu is supplied and returns true, deactivate the
                // currently active row on menu exit.
                if (options.exitMenu(this)) {
                    if (activeRow) {
                        options.deactivate(activeRow);
                    }

                    activeRow = null;
                }
            };

        /**
         * Trigger a possible row activation whenever entering a new row.
         */
        var mouseenterRow = function() {
                if (timeoutId) {
                    // Cancel any previous activation delays
                    clearTimeout(timeoutId);
                }

                options.enter(this);
                possiblyActivate(this);
            },
            mouseleaveRow = function() {
                options.exit(this);
            };

        /*
         * Immediately activate a row if the user clicks on it.
         */
        var clickRow = function() {
                activate(this);
            };

        /**
         * Activate a menu row.
         */
        var activate = function(row) {
                if (row == activeRow) {
                    return;
                }

                if (activeRow) {
                    options.deactivate(activeRow);
                }

                options.activate(row);
                activeRow = row;
            };

        /**
         * Possibly activate a menu row. If mouse movement indicates that we
         * shouldn't activate yet because user may be trying to enter
         * a submenu's content, then delay and check again later.
         */
        var possiblyActivate = function(row) {
                var delay = activationDelay();

                if (delay) {
                    timeoutId = setTimeout(function() {
                        possiblyActivate(row);
                    }, delay);
                } else {
                    activate(row);
                }
            };

        /**
         * Return the amount of time that should be used as a delay before the
         * currently hovered row is activated.
         *
         * Returns 0 if the activation should happen immediately. Otherwise,
         * returns the number of milliseconds that should be delayed before
         * checking again to see if the row should be activated.
         */
        var activationDelay = function() {
                if (!activeRow || !$(activeRow).is(options.submenuSelector)) {
                    // If there is no other submenu row already active, then
                    // go ahead and activate immediately.
                    return 0;
                }

                var offset = $menu.offset(),
                    upperLeft = {
                        x: offset.left,
                        y: offset.top - options.tolerance
                    },
                    upperRight = {
                        x: offset.left + $menu.outerWidth(),
                        y: upperLeft.y
                    },
                    lowerLeft = {
                        x: offset.left,
                        y: offset.top + $menu.outerHeight() + options.tolerance
                    },
                    lowerRight = {
                        x: offset.left + $menu.outerWidth(),
                        y: lowerLeft.y
                    },
                    loc = mouseLocs[mouseLocs.length - 1],
                    prevLoc = mouseLocs[0];

                if (!loc) {
                    return 0;
                }

                if (!prevLoc) {
                    prevLoc = loc;
                }

                if (prevLoc.x < offset.left || prevLoc.x > lowerRight.x ||
                    prevLoc.y < offset.top || prevLoc.y > lowerRight.y) {
                    // If the previous mouse location was outside of the entire
                    // menu's bounds, immediately activate.
                    return 0;
                }

                if (lastDelayLoc &&
                        loc.x == lastDelayLoc.x && loc.y == lastDelayLoc.y) {
                    // If the mouse hasn't moved since the last time we checked
                    // for activation status, immediately activate.
                    return 0;
                }

                // Detect if the user is moving towards the currently activated
                // submenu.
                //
                // If the mouse is heading relatively clearly towards
                // the submenu's content, we should wait and give the user more
                // time before activating a new row. If the mouse is heading
                // elsewhere, we can immediately activate a new row.
                //
                // We detect this by calculating the slope formed between the
                // current mouse location and the upper/lower right points of
                // the menu. We do the same for the previous mouse location.
                // If the current mouse location's slopes are
                // increasing/decreasing appropriately compared to the
                // previous's, we know the user is moving toward the submenu.
                //
                // Note that since the y-axis increases as the cursor moves
                // down the screen, we are looking for the slope between the
                // cursor and the upper right corner to decrease over time, not
                // increase (somewhat counterintuitively).
                function slope(a, b) {
                    return (b.y - a.y) / (b.x - a.x);
                };

                var decreasingCorner = upperRight,
                    increasingCorner = lowerRight;

                // Our expectations for decreasing or increasing slope values
                // depends on which direction the submenu opens relative to the
                // main menu. By default, if the menu opens on the right, we
                // expect the slope between the cursor and the upper right
                // corner to decrease over time, as explained above. If the
                // submenu opens in a different direction, we change our slope
                // expectations.
                if (options.submenuDirection == "left") {
                    decreasingCorner = lowerLeft;
                    increasingCorner = upperLeft;
                } else if (options.submenuDirection == "below") {
                    decreasingCorner = lowerRight;
                    increasingCorner = lowerLeft;
                } else if (options.submenuDirection == "above") {
                    decreasingCorner = upperLeft;
                    increasingCorner = upperRight;
                }

                var decreasingSlope = slope(loc, decreasingCorner),
                    increasingSlope = slope(loc, increasingCorner),
                    prevDecreasingSlope = slope(prevLoc, decreasingCorner),
                    prevIncreasingSlope = slope(prevLoc, increasingCorner);

                if (decreasingSlope < prevDecreasingSlope &&
                        increasingSlope > prevIncreasingSlope) {
                    // Mouse is moving from previous location towards the
                    // currently activated submenu. Delay before activating a
                    // new menu row, because user may be moving into submenu.
                    lastDelayLoc = loc;
                    return DELAY;
                }

                lastDelayLoc = null;
                return 0;
            };

        /**
         * Hook up initial menu events
         */
        $menu
            .mouseleave(mouseleaveMenu)
            .find(options.rowSelector)
                .mouseenter(mouseenterRow)
                .mouseleave(mouseleaveRow)
                .click(clickRow);

        $(document).mousemove(mousemoveDocument);

    };
})(jQuery);







jQuery(document).ready(function($){
	//open/close mega-navigation
	$('.cd-dropdown-trigger').on('click', function(event){
		event.preventDefault();
		toggleNav();
	});

	//close meganavigation
	$('.cd-dropdown .cd-close').on('click', function(event){
		event.preventDefault();
		toggleNav();
	});

	//on mobile - open submenu
	$('.has-children').children('a').on('click', function(event){
		//prevent default clicking on direct children of .has-children 
		event.preventDefault();
		var selected = $(this);
		selected.next('ul').removeClass('is-hidden').end().parent('.has-children').parent('ul').addClass('move-out');
	});

	//on desktop - differentiate between a user trying to hover over a dropdown item vs trying to navigate into a submenu's contents
	var submenuDirection = ( !$('.cd-dropdown-wrapper').hasClass('open-to-left') ) ? 'right' : 'left';
	$('.cd-dropdown-content').menuAim({
        activate: function(row) {
        	$(row).children().addClass('is-active').removeClass('fade-out');
        	if( $('.cd-dropdown-content .fade-in').length == 0 ) $(row).children('ul').addClass('fade-in');
        },
        deactivate: function(row) {
        	$(row).children().removeClass('is-active');
        	if( $('li.has-children:hover').length == 0 || $('li.has-children:hover').is($(row)) ) {
        		$('.cd-dropdown-content').find('.fade-in').removeClass('fade-in');
        		$(row).children('ul').addClass('fade-out')
        	}
        },
        exitMenu: function() {
        	$('.cd-dropdown-content').find('.is-active').removeClass('is-active');
        	return true;
        },
        submenuDirection: submenuDirection,
    });

	//submenu items - go back link
	$('.go-back').on('click', function(){
		var selected = $(this),
			visibleNav = $(this).parent('ul').parent('.has-children').parent('ul');
		selected.parent('ul').addClass('is-hidden').parent('.has-children').parent('ul').removeClass('move-out');
	}); 

	function toggleNav(){
		var navIsVisible = ( !$('.cd-dropdown').hasClass('dropdown-is-active') ) ? true : false;
		$('.cd-dropdown').toggleClass('dropdown-is-active', navIsVisible);
		$('.cd-dropdown-trigger').toggleClass('dropdown-is-active', navIsVisible);
		if( !navIsVisible ) {
			$('.cd-dropdown').one('webkitTransitionEnd otransitionend oTransitionEnd msTransitionEnd transitionend',function(){
				$('.has-children ul').addClass('is-hidden');
				$('.move-out').removeClass('move-out');
				$('.is-active').removeClass('is-active');
			});	
		}
	}

	//IE9 placeholder fallback
	//credits http://www.hagenburger.net/BLOG/HTML5-Input-Placeholder-Fix-With-jQuery.html
	if(!Modernizr.input.placeholder){
		$('[placeholder]').focus(function() {
			var input = $(this);
			if (input.val() == input.attr('placeholder')) {
				input.val('');
		  	}
		}).blur(function() {
		 	var input = $(this);
		  	if (input.val() == '' || input.val() == input.attr('placeholder')) {
				input.val(input.attr('placeholder'));
		  	}
		}).blur();
		$('[placeholder]').parents('form').submit(function() {
		  	$(this).find('[placeholder]').each(function() {
				var input = $(this);
				if (input.val() == input.attr('placeholder')) {
			 		input.val('');
				}
		  	})
		});
	}
});
              
            
!
999px

Console