时间戳

首页 > 解决方案 > CSS递归菜单在悬停时显示子菜单

css - CSS递归菜单在悬停时显示子菜单

问题描述

我使用 ngtemplates 创建了 Angular 的递归菜单。我想制作一个在悬停时显示子菜单的菜单。但是，当我退出主菜单的悬停时遇到问题，子菜单消失了。

这是我正在生成的示例代码结构。

a+ul {
  display: none;
}

a:hover+ul {
  display: block
}
<ul>
  <li>
    <a>a</a>
    <ul>
      <li>
        <a>b</a>
        <ul>
          <li><a>c</a></li>
        </ul>
      </li>
    </ul>
  </li>
</ul>

标签： css

解决方案

尝试以下代码以获得预期的输出：

a+ul {
    display: none;
}

a:hover+ul {
    display: block
}

#menu a {
    display: block;
    text-decoration: none;
}

#menu:hover ul,
#menu:hover ul li:hover ul,
#menu:hover ul li:hover ul li:hover ul {
    display: block;
}
<!DOCTYPE html>
<html>

<head>

</head>

<body>
    <div id="menu">
        <ul>
            <li>
                <a href="#">a</a>
                <ul>
                    <li>
                        <a href="#">b</a>
                        <ul>
                            <li><a href="#">c</a></li>
                        </ul>
                    </li>
                </ul>
            </li>
        </ul>
    </div>
</body>

</html>

推荐阅读