Html 无div悬停时导航栏下拉菜单

1） 悬停时，我的下拉菜单未显示在“项目”下

2） 如果我成功了

.dropdown content{display:block；}

然后在项目下显示，但未对齐

我需要你的帮助！我需要悬停来工作，并修复对齐

注意：我特别没有将我的“项目”按钮包装在一个div中，所以修复程序将不起作用

代码笔链接：

---

谢谢你

导航栏通常是不好的做法，你真的需要用div来包装它，而这会破坏导航栏是一个问题。也许可以查看一些更好的实践

如果您将锚点包装在列表中，它可以很容易实现，如下所示：

标题{
位置：固定；
宽度：100%；
背景#4168a8；
}
.集装箱{
宽度：90%；
高度：75px；
保证金：0自动；
}
导航{
颜色：白色；
浮动：左；
字体大小：14px；
字体系列：雷威；
文字装饰：无；
利润上限：11px；
-webkit字体平滑：抗锯齿；
}
李海军{
显示：内联；
}
.头衔{
颜色：#DB5461；
字体大小：24px；
字体系列：雷威；
文字装饰：无；
右边距：35px；
字母间距：1px；
文本转换：小写；
-webkit字体平滑：抗锯齿；
字体大小：粗体；
}
导航a{
颜色：白色；
文字装饰：无；
右边距：35px；
位置：相对位置；
显示：内联块；
填充：.4em；
左侧填充：.2em；
右侧填充：.2em；
文本转换：大写；
}
.下拉列表{
位置：相对位置；
}
.下拉内容{
显示：无；
位置：绝对位置；
左：0；
最高：100%；
背景色：#f9f9f9；
z指数：1；
}
.下拉内容a{
颜色：黑色；
文字装饰：无；
显示：块；
文本转换：小写；
边际：0px；
}
.下拉列表：悬停>.下拉列表内容{
显示：块；
}
.dropdown内容a：将鼠标悬停在下拉列表中的项目上时，请将鼠标悬停{/**/
背景色：#ddd；
}
.underline_动画：：之后{
内容：''；
位置：绝对位置；
底部：0；
左：0；
宽度：100%；
高度：2倍；
背景色：#222；
-webkit转换：scaleX（0）；
可见性：隐藏；
-webkit过渡：所有.6s轻松；
}
.underline_动画：悬停：：之后{
-webkit转换：scaleX（1）；
能见度：可见；
}
.链接{
浮动：对；
利润上限：26px；
}
.链接a{
左边距：20px；
文字装饰：无；
显示：内联块；
}
.链接a：悬停{
不透明度：0.7；
}
身体{
保证金：0；
背景：#222；
}

标题

能否将所有链接包装在

元素中？那会让你的生活轻松100倍。太棒了！它工作得很好。如何将下拉菜单置于项目的中心？@Geozah我要做的是增加下拉菜单的宽度以匹配项目链接。