header and menu

by Brandon

HTML

<header id="header" class="sticky">
  <!--<div id="headerLogo">
    <svg preserveAspectRatio="xMidYMid" viewBox="0 0 280 217" xmlns="http://www.w3.org/2000/svg">
      <path class="falconSvgStyle" d="m247 49l6-1 25-12-9 12-18 16 26-9-21 26 20-6s-4.658 7.653-13 17-24.405 18.904-36 24-14 6-14 6l-34 38s15.674 0.888 25 1 36 4 36 4 0.458 3.494 0 10-3 12-3 12l-22-6 17 14-15 14-16-14 10 14-14 7s-4.189-7.768-9-14-8.536-14.724-18-19-24.68-6.279-35-4-14.667 5.017-37 2-68.304-21.044-73-23-4.461-7.202 0-12 8-7 8-7h46s-34.094-33.839-36-38-5.234-35.112-8-59-8-41-8-41 5.024 2.953 12 17 11 28 11 28-0.128-11.468 0-19 1-21 1-21 7.098 11.613 10 22 6 25 6 25 2.117-6.826 4-14 2-15 2-15 6.05 10.998 8 19 3 18 3 18 2.344-3.339 4-8 4-11 4-11-0.523 8.301-0.599 16.818c-0.08 8.976 1.535 18.183 1.599 18.182 0 0 8.655 10.831 19 20 11.585 10.269 25 19 25 19l-17 21s9.955-7.934 28-29 38-45 38-45 22.797-9.84 50-26 40-27 40-27l-5 9-24 30zm-230 97c-1.856 3.182 0 9 0 9s-3.726-1.816-7-2-8 1-8 1 5.634-9.932 11-12 11-2 11-2-5.107 2.754-7 6z" />
    </svg>
  </div>

  <a href="/" class="nameHome">
    <div class="fwiName">falconwood</div>
  </a>
  <div class="headerGreaterThan">&gt;</div>
  <div class="breadcrumInsert"></div>
-->
  <!-- Navigation-->
  <nav>
    <a class="toggleMenu" href="#"><i class="fas fa-bars"></i></a>
    <ul>
      <li>
        <a href="/#locations">locations</a>

      </li>
      <li>
        <a href="services.html">services</a>

      </li>
      <li>
        <a href="#">about</a>

        <ul>
          <li><a href="/#about">our work</a></li>
          <li><a href="/leadership.html">leadership</a></li>
          <li><a href="/corporate.html">corporate overview</a></li>
        </ul>
      </li>
      <li class="">
        <a href="#">careers</a>
        <ul>
          <li><a href="/benefits.html">benefits</a></li>
          <li><a href="https://careers-falconwood.icims.com">position openings</a></li>
        </ul>
      </li>
    </ul>

  </nav>
  <!-- End Navigation-->

CSS

body, nav, ul, li, a  {margin: 0; padding: 0;}
body {font-family: "Helvetica Neue", Helvetica, Arial, sans-serif; }
a {text-decoration: none;}
nav {
    width: 90%;
    max-width: 340px;
    margin: 10px auto;
    float: right;
}
.toggleMenu {
    display: none;
    background: #666;
    padding: 10px 15px;
    color: #fff;
}
nav > ul {
    list-style: none;
     *zoom: 1;
     background: #175e4c;
     position: relative;
}
nav > ul::before,
nav > ul::after {
    content: " ";
    display: table;
}
nav > ul::after {
    clear: both;
}

nav a {
    padding: 10px 15px;
    color: #fff;
    *zoom: 1;
}
nav > ul > li {
    float: left;
    border-top: 1px solid #104336;
    z-index: 200;
}
nav > ul > li > a {
    display: block;
}
nav li ul {
    position: absolute;
    left: -9999px;
    z-index: 100;
}
nav li li a {
    display: block;
    background: #1d7a62;
    position: relative;
    z-index: 100;
    border-top: 1px solid #175e4c;
}
nav li li li a {
    background: #249578;
    z-index: 200;
    border-top: 1px solid #1d7a62;
}