How to get my sub-menus to expand upwards?

I need help with the CSS for a menu I am creating. The menu is situated at the bottom left of my page and as such I want my menu to expand upwards (which it is) and also the sub menu's to expand right and upwards. at the moment they are expanding right and downwards which puts them off the page in my full implementation.

.dropup {
    position: fixed;
    bottom: 0;
    left: 0;
    margin-left: 10px;
    margin-bottom: 10px;
    display: inline-block;
}

ul {
  list-style: none;
  padding: 0;
  margin: 0;
  background: #1bc2a2;
}

ul li {
  display: block;
  position: relative;
  float: left;
  background: #1bc2a2;
}
li ul { 
  display: none; 
}

ul li a {
  display: block;
  padding: 1em;
  text-decoration: none;
  white-space: nowrap;
  color: #fff;
}

ul li a:hover {
  background: #2c3e50; 
}

li:hover > ul {
  display: block;
  position: absolute;
  bottom: 100%;
}

li:hover li { float: none; }

li:hover a { background: #1bc2a2; }

li:hover li a:hover { background: #2c3e50; }

.main-navigation li ul li { border-top: 0; }
ul ul ul {
  left: 100%;
  top: 0;
}
ul:before,
ul:after {
  content: " "; /* 1 */
  display: table; /* 2 */
}

ul:after { clear: both; }

<div class="dropup">
  <ul class="dropup_menu">
    <li><a href="#">Settings</a>
      <ul>
        <li><a href="#">Board Style</a>
          <ul>
            <li><a href="#">Board Style 1</a></li>
            <li><a href="#">Board Style 2</a></li>
            <li><a href="#">Board Style 3</a></li>
          </ul>
        </li>
        <li><a href="#">Piece Style</a>
          <ul>
            <li><a href="#">Piece style 1</a></li>
            <li><a href="#">Piece style 2</a></li>
            <li><a href="#">Piece style 3</a></li>
          </ul>
        </li>
        <li><a href="#">Other Settings</a>
          <ul>
            <li><a href="#">other 1</a></li>
            <li><a href="#">other 2</a></li>
            <li><a href="#">other 3</a></li>
          </ul>
        </li>
      </ul>
    </li>
  </ul>
</div>