Html 下拉列表使用垂直列表而不是水平列表

你好，我正在创建一个下拉菜单 但问题是下拉列表是水平列表，而不是垂直列表， 在“健康”菜单下，它还显示一些缩进和idk原因。 Tbh，我只是按照教程中的说明做了一些修改 看看我想成为什么样的人。如果你能同时纠正你看到的一些问题，那就太好了，非常感谢你

.nav{/*http://www.mattboldt.com/building-great-navbars-toolbars-display-table/ */ 高度：50px； 宽度：100%； 保证金：50px 0px 0px 0px； } 李国荣先生{ 显示：表格单元格；/*使其成为水平列表*/ 字体系列：Calibri，Helvetica，无衬线； 字体大小：20px； 填充：10px 50px 20px 10px； /*左边框：E0 1px实心； 右边框：E0 1px实体*/ } 美国海军{ 背景：557AB2；/*背景色*/ 文本对齐：居中； 边框半径：10px；/*使长方体成为圆形边缘*/ 列表样式：无； 位置：相对；/*允许查看框*/ /*删除框中多余的空间仅显示从第一项到最后一项的长度，而不是整个导航栏*/ } .nav ul ul{/*用于“健康”的下拉菜单。“营养”和“心理健康”嵌套在它下面*/ /*隐藏“健康”下列表的营养和心理健康*/ 显示：无； 位置：绝对位置； } .nav ul li:hover>ul{/*允许下拉“健康”*/ 显示：块； } 李丽娜先生{ 显示：块； 文本装饰：无；/*删除任何文本装饰下划线*/ }

---

这是因为您将它作为一个显示：表单元格如此。使用显示：阻止将解决您的问题。检查以下内容

.nav{/*http://www.mattboldt.com/building-great-navbars-toolbars-display-table/ */ 高度：50px； 宽度：100%； 保证金：50px 0px 0px 0px； } 李国荣先生{ 显示：表格单元格；/*使其成为水平列表*/ 字体系列：Calibri，Helvetica，无衬线； 字体大小：20px； 填充：10px 50px 20px 10px； /*左边框：E0 1px实心； 右边框：E0 1px实体*/ } 美国海军{ 背景：557AB2；/*背景色*/ 文本对齐：居中； 边框半径：10px；/*使长方体成为圆形边缘*/ 列表样式：无； 位置：相对；/*允许查看框*/ /*删除框中多余的空间仅显示从第一项到最后一项的长度，而不是整个导航栏*/ } .nav ul ul{/*用于“健康”的下拉菜单。“营养”和“心理健康”嵌套在它下面*/ /*隐藏“健康”下列表的营养和心理健康*/ 显示：无； 位置：绝对位置； 顶部：50px； 填充：0； } .子菜单{ 显示：块！重要； 填充：10px 20px！重要； } .nav ul li:hover>ul{/*允许下拉“健康”*/ 显示：块； } 李丽娜先生{ 显示：块； 文本装饰：无；/*删除任何文本装饰下划线*/ }

---

一切都是正确的你需要做的是添加一个css

.nav ul li ul li{display: block;padding: 14px;} 

然后，所有内容都将以垂直方式显示

如果你不想要填充物，就用

.nav ul li ul{padding-left: 0px;}

---

非常感谢。这对于初学者来说也更容易理解，如果你不介意的话，请你帮我将导航栏中的菜单文本居中对齐，非常感谢！