Quiero que junto a "Donde Ir" se añadan más items de forma horizontal, pero cuando lo intento se van listando hacia abajo en la parte desplegable. ¿Cómo podría hacerlo?

Éste es mi código:

<!-- begin snippet: js hide: false console: true babel: false -->

<!-- language: lang-css -->

    * {
      box-sizing: border-box;
    }

    ul {
      margin: 0;
      padding: 0;
      list-style-type: none;
    }

    a {
      display: block;
      padding: .2rem 0;
      color: #000;
      font-size: .875rem;
      text-decoration: none;
    }

    a:hover {
      color: #050505;
      text-decoration: underline;
    }

    h4 {
      margin: .5rem 0 .75rem;
      padding-bottom: .5rem;
      border-bottom: 1px solid #ddd;
      font-size: 1.25rem;
      font-weight: normal;
    }

    h5 {
      margin: 0;
      margin-bottom: .5rem;
      font-size: .875rem;
    }

    nav::after {
      content: '';
      display: block;
      clear: both;
    }

    .menu-municipios {
      display: inline-block;
      border-radius: .2rem;
      background: #fff;
      position: relative;
      z-index: 2;
      margin-right: 30px;
    }

    .menu-municipios:hover {
      position: absolute;
    }

    .menu-municipios:hover>li {
      display: block;
    }

    .menu-municipios:hover>li:first-child {
      border-color: transparent;
      border-bottom: none;
      background-color: #eee;
      box-shadow: none;
      position: relative;
      z-index: 1;
      color: #444;
      cursor: default;
    }

    .menu-municipios:hover>li:first-child::after {
      content: '\f106';
    }

    .menu-municipios:hover>li:last-child {
      border-radius: 0 0 .2rem .2rem;
    }

    .menu-municipios:hover+.temp::after {
      display: block;
    }

    .menu-municipios>li {
      display: none;
      width: 12rem;
      margin: 0;
    }

    .menu-municipios>li:first-child {
      display: block;
      padding: .65rem;
      background: #fff;
      color: #0a0a0a;
      font-size: .875rem;
      cursor: pointer;
    }

    .menu-municipios>li:first-child::after {
      content: '\f107';
      float: right;
    }

    .menu-municipios>li:not(:first-child):hover {
      width: calc(960px - 6rem);
      border-right: none;
    }

    .menu-municipios>li:nth-child(2):hover::before {
      content: '';
      display: block;
      width: 12rem;
      height: 3rem;
      border: 1px solid transparent;
      position: absolute;
      top: 0;
      z-index: 10;
    }

    li h3 {
      width: 12rem;
      margin: 0;
      padding: .65rem .75rem;
      border: 1px solid transparent;
      border-width: 1px 0;
      background: #fff;
      position: relative;
      z-index: 10;
      font-size: .875rem;
      font-weight: normal;
      cursor: default;
    }

    li:last-child:hover h3 {
      border-bottom-color: transparent;
      border-radius: 0 0 0 .2rem;
    }

    li:hover h3 {
      width: calc(12rem + 1px);
      border-color: #bbb;
    }

    li:hover div {
      display: block;
    }

    li div {
      display: none;
      width: calc(960px - 6rem - 12rem);
      padding: 1rem 1.2rem;
      border-left: 1px solid #bbb;
      border-radius: 0 .2rem .2rem 0;
      background: #fff;
      position: absolute;
      top: 0;
      bottom: 0;
      left: 12rem;
      z-index: 1;
    }

    .temp {
      display: flex;
      width: 72%;
      border-radius: .2rem;
      float: right;
      font-size: .875rem;
    }

    .temp::after {
      content: '';
      display: none;
      background: rgba(0, 0, 0, 0.35);
      position: fixed;
      top: 0;
      bottom: 0;
      right: 0;
      left: 0;
    }

    .temp li {
      padding: .65rem 0;
      flex: 1;
      text-align: center;
      cursor: pointer;
    }

    main {
      display: flex;
      width: 100%;
      height: 15rem;
      margin-top: 2rem;
      padding: 1rem;
      background: #ccc;
      position: relative;
      z-index: 1;
      clear: both;
    }

    main p {
      margin: auto;
      color: #555;
      text-transform: uppercase;
      letter-spacing: 1px;
    }

    @media (max-width: 60rem) {
      .temp {
        width: 67%;
      }
    }

<!-- language: lang-html -->

    <nav>
      <ul class="menu-municipios">
        <li id>Donde Ir <i class="fas fa-angle-down"></i></li>
        <li>
          <h3>Naturaleza</h3>
          <div>
            <h4>Naturaleza</h4>
            <ul>
              <li><a href="#">naturaleza</a></li>
              <li><a href="#">2</a></li>
              <li><a href="#">3n</a></li>
              <li><a href="#">4</a></li>
              <li><a href="#">5</a></li>
              <li><a href="#">6</a></li>
              <li><a href="#">7</a></li>
            </ul>
          </div>
        </li>
        <li>
          <h3>arquitectura</h3>
          <div>
            <h4>arquitectura</h4>
          </div>
        </li>
        <li>
          <h3>submenu3</h3>
          <div>
            <h4>submenú 3</h4>
          </div>
        </li>
        <li>
          <h3>submenu4</h3>
          <div>
            <h4>submenu4</h4>
          </div>
        </li>
        <li>
          <h3>submenu5</h3>
          <div>
            <h4>submenu5</h4>
          </div>
        </li>
        <li>
          <h3>submenu6</h3>
          <div>
            <h4>submenu6</h4>
          </div>
        </li>
        <li>
          <h3>submenu7</h3>
          <div>
            <h4>submenu7</h4>
          </div>
        </li>
        <li>
          <h3>submenu8</h3>
          <div>
            <h4>submenu8</h4>
          </div>
        </li>

      </ul>

      <ul class="menu-municipios">
        <li id>menu 2 <i class="fas fa-angle-down"></i></li>
      </ul>

      <ul class="menu-municipios">
        <li id>menu 3 <i class="fas fa-angle-down"></i></li>
      </ul>

      <!-- begin snippet: js hide: false console: true babel: false -->

<!-- end snippet -->