CSS: 菜单不会垂直

Question

我实际上正在学习 CSS，但我没有让菜单栏垂直。任何人都可以帮助代码？我尝试了很多变体，但没有得到我的结果。

ul.sqlmenu {
        display:block;
        text-align: center;
        float:left;
        overflow: hidden;
        background-color: #2c2c2c;
        margin-top: -860px;
        margin-left: 8px;
        margin-right:10px;
        width: 180px;
        height: 45px;
    }
    ul.sqlmenu li {
        display:inline-table;
        float: left;
    }
    ul.sqlmenu li a {
        color: white;
        text-align: center;
        padding: 14px 16px;
        text-decoration: none;
    }
    ul.sqlmenu li a:hover{
        background-color:darkslategray;
        width:180px;
    }

和

    <ul class="sqlmenu">
        <li><a href="folgt">SELECT</a></li>
    <   li><a href="folgt">ADD</a></li>
    </ul>

Answer 1

您可以使用 display: flex; 和 flex-direction: column;

来完成

ul.sqlmenu {
  display: flex;
  overflow: hidden;
  background-color: #2c2c2c;
  margin-left: 8px;
  margin-right: 10px;
  width: 100px;
  padding: 10px 0;
  flex-direction: column;
}

ul.sqlmenu li {
  display: inline-table;
  float: left;
  padding: 5px;
}

ul.sqlmenu li a {
  color: white;
  text-decoration: none;
  padding: 5px;
}

ul.sqlmenu li a:hover {
  background-color: darkslategray;
  width: 180px;
}

<ul class="sqlmenu">
  <li><a href="folgt">SELECT</a></li>
  <li><a href="folgt">ADD</a></li>
</ul>

Working Fiddle

CSS: 菜单不会垂直

CSS: Menu won't get vertical

css

menu