Html 导航菜单对齐

我正在尝试创建一个基本的下拉菜单。我的路线有问题。如何使子菜单项直接位于另一个子菜单项之下？例如，我试图让twitter、instagram和facebook成为“社交”的载体。 谢谢

HTML

---

由于块级元素占用自己的行，因此此规则应适用于您：

.sub li {
    display: block;
}

添加到

.main nav.sub

：

position: absolute;
padding: 0;

正文{
背景：#000000；
颜色：白色；
}
.主导航{
浮动：左；
}
主导航李先生{
字体大小：10px；
显示：内联块；
右边填充：10px；
}
.主导航接头{
位置：绝对位置；
填充：0；
颜色：粉红色；
浮动：无；
z指数：-200；
}
苏丽先生{
显示：块；
}

家
计划

社会的

推特
脸谱网
Instagram

以下是它的基本原理

*{
保证金：0；
填充：0；
框大小：边框框；
}
身体{
背景：黑色；
}
保险商实验室{
列表样式类型：无；
颜色：白色；
}
.主导航>李{
显示：内联块；
位置：相对位置；
右边填充：10px；
}
.sub{
位置：绝对位置；
最高：100%；
左：0；
颜色：粉红色；
/*显示：无*/*已禁用演示*/
}
.下拉列表：hover.sub{
显示：块；
}

家
计划

社会的

推特
脸谱网
Instagram

position: absolute;
padding: 0;