CSS下拉菜单

Question

我正在尝试制作一个简单的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;
}

Answer 1

如果可能的话，我会避免使用JS。这不是必需的。只需将div贴在li内（其上的填充比li本身少一些）并设置div:hoverto的样式即可display:block;。