Html 下拉菜单自上而下

我想知道如何让这个下拉菜单从上到下而不是从左到右打开它的子菜单？让li在ul内部水平而不是垂直打开

此外，我想让一个特定的列表可见，而不是像所有其他列表一样隐藏。我试图用自己的名为“last”的类来标记这个ul，并使用CSS使其可见。。。我没有使用CSS的经验

多谢各位

保险商实验室{ 列表样式：无； 填充：0； 保证金：0； } 最后{ 能见度：可见； 列表样式：无； 填充：0； 保证金：0； } 李{ 颜色：黑色； 填充：1rem； } .container>ul{ 宽度：250px； 位置：相对位置； 高度：100vh； } ulli{ 显示：块； 位置：相对位置； 背景色：224490； } ul li：悬停>ul{ 显示：块； 位置：绝对位置； 宽度：250px； 身高：100%； 左：250px； 排名：0； } ul{ 显示：无； } ulli{ 背景色：白色； } str1str2str34 A. a11 a12 B 地下一层 b11 b12 地下二层 b21 22 23 地下三层 B31 b31 b32 B32 b41 b42 b43 C c11 c12 b41 b42 b43 c13

---

我已将ul li中的显示从块更改为内联块。为了正确定位，我已经注释掉了左边的：250px；和top:0；在ul li中：悬停>ul

保险商实验室{ 列表样式：无； 填充：0； 保证金：0； } 最后{ 能见度：可见； 列表样式：无； 填充：0； 保证金：0； } 李{ 颜色：黑色； 填充：1rem； 左填充：0；/*编辑1:父项下方的子项*/ } .container>ul{ 宽度：250px； 位置：相对位置； 高度：100vh； } ulli{ 显示：内联块；/*将表单块更改为内联块*/ 位置：相对位置； 背景色：224490； } ul li：悬停>ul{ 显示：块； 位置：绝对位置； 宽度：250px； 身高：100%； /*左：250px； 排名：0*/ } ul{ 显示：无； 位置：绝对位置； 宽度：250px； 身高：100%； } ulli{ 背景色：白色； } str1str2str34 A. a11 a12 B 地下一层 b11 b12 地下二层 b21 22 23 地下三层 B31 b31 b32 B32 b41 b42 b43 C c11 c12 b41 b42 b43 c13

---

非常感谢。我需要孩子们在父母的正下方。现在，他们都稍微向右移动。我能直接拿下来吗？我的第二个问题是，我希望孩子们随时可见。我已经编辑并添加了注释，让孩子们位于父母的正下方。有多个级别的子级，是否要显示所有子级？在当前的设计中，这是不可能的，因为显示会重叠。我已经更新了第二个代码段，使所有的子代码始终可见。但是，我不确定我是否理解正确。首先谢谢你。这是更好的，但现在一切都是没有垫到左边没有边缘，这看起来很难看。我能给整个窗户留一个空白吗？对于2，我希望，例如，最后一个ul是可见的，而所有其他的都像现在隐藏的悬停：b41 b42 b43，但实际上我真正喜欢的只是一个行列表或其他任何东西，但它必须是一行后的下拉菜单。这将显示一些始终可见的静态信息

ul li {
  display: inline-block; /* Change form block to inline-block */
  position: relative;
  background-color: #224490;
}

ul li:hover>ul {
  display: block;
  position: absolute;
  width: 250px;
  height: 100%;
  /* left: 250px; 
     top: 0; */
}