CSS下拉菜单

  • Z时代
  • 2024-01-10
  • 分类：问答

我正在尝试制作一个简单的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。这不是必需的。只需将div贴在li内（其上的填充比li本身少一些）并设置div:hoverto的样式即可display:block;。

以上是 CSS下拉菜单 的全部内容， 来源链接： utcz.com/qa/398221.html

回到顶部