html - 获取导航菜单下拉菜单，使其看起来像基本菜单项

Question

我有这个 CSS 菜单：

如果您将鼠标悬停在“inostranstvo”上，您将看到其下方打开一个下拉菜单。我一直在尝试做但失败的是让下拉项目看起来像水平菜单中的项目。

因此，当用户将鼠标悬停在“inostranstvo”上时，显示的项目应该具有：与现有菜单项相同的宽度（最宽项目的宽度）、相同的高度和背景。

背景很简单，但我不能强制高度，我不知道如何对齐宽度。这没有任何作用：

#nav li:hover ul li{
    height:55px;
    line-height:55px;
    width:200px;
}

宽度值是随机的，最重要的是高度，我似乎无法对列表项强加。另一方面，添加边框是可行的，但它会将其添加到红色背景区域内。我确信这不会很复杂，但我无法弄清楚。

score 1 · Accepted Answer

您是否尝试将子菜单 li 元素设置为“显示类型：块”？

我已将以下 css 添加到 JSFiddle 中，它似乎可以工作：

#nav li:hover ul li {
    display: block;
    background: #DE2211;
    border-bottom: 1px solid black;
}

1 回答 1