Html 导航栏上的下拉列表

我想做一些下拉菜单上的导航菜单，但它不工作，以及我想中心它。我尝试使用display:inline；命令，但没用

ul{
列表样式类型：无；
保证金：0；
填充：0；
溢出：隐藏；
背景色：#333；
位置：绝对位置；
左：0%；
最高：0%；
宽度：100%；
身高：8%；
}
李{
浮动：左；
}
李阿{
显示：块；
颜色：白色；
文本对齐：居中；
填充：20px 25px；
文字装饰：无；
字体大小：100%；
字体系列：Lucida Sans Unicode；
}
李娜：停下来{
背景色：#111；
}
李a：积极的{
背景颜色：灰色；
}
ul li：悬停>ul
{
显示：块
}

可以这样做吗

使用

flexbox

将其居中，然后首先使用隐藏子菜单

ul li ul {
  display: none;
}

悬停菜单时，显示子菜单使用：

/* Sub menu item */
ul li ul li {
  width: 100%;
  display: block;
}

/* Show Sub menu on hover */
ul li:hover > ul {
  position: absolute;
  display: block;
  background: green;
  width: 30%; /* Sub menu width */
}

ul{
列表样式类型：无；
保证金：0；
填充：0；
溢出：隐藏；
背景色：#333；
宽度：100%；
}
李{
浮动：左；
}
李阿{
显示：块；
颜色：白色；
文本对齐：居中；
填充：20px 25px；
文字装饰：无；
字体大小：100%；
字体系列：Lucida Sans Unicode；
}
李娜：停下来{
背景色：#111；
}
李a：积极的{
背景颜色：灰色；
}
ul li ul{
显示：无；
}
/*子菜单项*/
ulli ulli{
宽度：100%；
显示：块；
}
/*悬停时显示子菜单*/
ul li：悬停>ul{
位置：绝对位置；
显示：块；
背景：绿色；
宽度：30%；/*子菜单宽度*/
}
.集装箱{
显示器：flex；
对齐项目：居中；
证明内容：中心；
柔性包装：包装；
}

首先，子菜单的html标记没有正确完成。此外，如果希望显示子菜单，则不能在主容器上设置溢出。您可以使用flebox使导航居中，而无需更改标记或编写更多代码。见下面的示例

nav{}
保险商实验室{
显示器：flex；
证明内容：中心；
列表样式类型：无；
保证金：0；
填充：0；
/**溢出：隐藏；删除此项（不允许显示子菜单）**/
背景色：#333；
位置：绝对位置；
/**左：0%**/
最高：0%；
宽度：100%；
/**高度：8%；删除此项**/
}
ul{
最高：100%；
显示：块；
高度：自动；
可见性：隐藏；
}
李{
/**浮动：左**/
位置：相对位置；
}
李阿{
显示：块；
颜色：白色；
文本对齐：居中；
填充：20px 25px；
文字装饰：无；
字体大小：100%；
字体系列：Lucida Sans Unicode；
}
李娜：停下来{
背景色：#111；
}
李a：积极的{
背景颜色：灰色；
}
ul li：悬停>ul{
显示：块；
能见度：可见；
}
li>ulli{
浮动：无；
}

你到底想把什么放在中心位置？菜单项目？