How can I create a dropdown menu with three nested sublevels?

Question

I am attempting to create a dropdown menu that contains three nested sublevels

Example (each indent indicates a sublevel):

Auto Parts

Audi/Porsche/VW

  Body & Trim

     Bumpers

     Gas Caps

  Exhaust

BMW

The platform that I am using for my website, Shopify, does not support nesting within a nested submenu, so I hope that it is possible to code it manually in HTML and CSS.

So far, this is the HTML and CSS code that I have.

HTML:

<div id="divMenu">
<ul>
  <li><a href= {{/collections/audi-porsche-vw}}>Audi/Porsche/VW</a>
      <ul>
          <li><a href="#">Body Mechanical & Trim</a></li>
          <ul>
              <li><a href="#">Bumpers</a></li>
              <li><a href="#">Gas Caps</a></li>
              <li><a href="#">Spoilers</a></li>
              <li><a href="#">Wipers</a></li>
          </ul>
          <li><a href="#">Exhaust</a></li>
      </ul>
    </li>
  </ul>
</div>

CSS:

#divMenu, ul, li, li li {
  margin: 0;
  padding: 0;
}

#divMenu {
  width: 150px;
  height: 27px;
}

#divMenu ul
{
  line-height: 25px;
}

    #divMenu li {
      list-style: none;
      position: relative;
      background: #641b1b;
    }

        #divMenu li li {
          list-style: none;
          position: relative;
          background: #641b1b;
          left: 148px;
          top: -27px
        }


    #divMenu ul li a {
      width: 148px;
      height: 25px;
      display: block;
      text-decoration: none;
      text-align: center;
      font-family: Georgia,'Times New Roman',serif;
      color: #ffffff;
      border: 1px solid #eee;
    }

    #divMenu ul ul {
      position: absolute;
      visibility: hidden;
      top: 27px;
    }

    #divMenu ul li:hover ul {
      visibility: visible;
    }

    #divMenu li:hover {
      background-color: #945c7d;
    }

    #divMenu ul li:hover ul li a:hover {
      background-color: #945c7d;
    }

    #divMenu a:hover {
      font-weight: bold;
    }

This code resulted in a messy drop-down menu that had the third level showing up hidden behind the second. It also does not allow the user to actually select any of the subcategories that appear after hovering over a menu item. The nested items disappear when the mouse is moved to select one of them.

Any help would be greatly appreciated, and please let me know if this is simply not possible with HTML and CSS so that I can start looking for another workaround. I currently have individual pages for my four big categories that are accessed from a menu, and the goal is to either have corresponding nested drop-down menus on each of those pages, or even find a way to implement the three sublevel menu into the main menu found in the header.