html - CSS下拉菜单

我正在尝试制作一个简单的CSS下拉菜单，当您将鼠标悬停在链接上时，将显示子菜单。当您将鼠标悬停在li上时，我已经设法实现了这一点，但无法弄清楚如何使用链接来实现。

我之所以尝试使用链接而不是li来执行此操作，是因为我的菜单宽度为100％，并且li的区域比链接大，因此，如果将鼠标悬停在该区域上，则在不使用该菜单时会出现子菜单不想。

我的CSS如下：

.menu {
    border: solid 1px red;
    font-size: 5em;
    font-family: 'Raleway', arial, serif;
}

.menu ul {
}

.menu ul.children {
    display: none;
}

.menu ul li {
    margin: 20px 0 10px 0;
}

.menu ul li:hover ul.children {
    display: block;
    position: absolute;
}

.menu ul li a {
    padding: 10px 10px 0 40px;
    background: rgba(0,0,0,0.5);
    color: #fff;
    text-decoration: none;
}

最佳答案

如果可能的话，我会避免使用JS。这不是必需的。只需在您的li内插入一个div（其填充比li本身少一点），然后将div:hover设置为display:block;即可。

这是a fiddle演示的方法。这很像您已经拥有的。

关于html - CSS下拉菜单，我们在Stack Overflow上找到一个类似的问题：https://stackoverflow.com/questions/6506571/