如何让我的子菜单向上展开？

Question

我需要有关我正在创建的菜单的 CSS 帮助。该菜单位于页面的左下角，因此我希望我的菜单向上扩展（确实如此），并且子菜单也向右和向上扩展。目前它们正在向右和向下扩展，这使它们在我的完整实现中脱离了页面。

.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>

Answer 1

在此规则中，您使用了：

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

编辑：并添加

left: 100%;

以使菜单与主元素的右边框对齐。您需要对子菜单应用类似的设置。

...

bottom

应该是

0

与父元素的底部对齐（即“向上”）

.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: 0;
  left: 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>