javascript - 菜单 - 在整个菜单项下显示子菜单项 - HTML/CSS

Question

菜单项是这样的图片 display: inline-block; & padding-right:10px 使它们在一行中

它们处于“ul/li 体系结构”中，如下所示:

    <nav>
        <ul>
            <li><img src="./information.jpg" height="120" width="*"></img></li>
            <li><img src="./fotos.jpg" height="120" width="*"></img></li>
            <li><img src="./security.jpg" height="120" width="*"></img></li>
            <li><img src="./projekt.jpg" height="120" width="*"></img></li>
            <li><img src="./elearning.jpg" height="120" width="*"></img></li>
            <li><img src="./kontakt.jpg" height="120" width="*"></img></li>
        </ul>
    </nav>

现在我正在尝试制作一个应该如下所示的子菜单: 如果您单击灯泡图片，就会发生这种情况。所以应该把整个页面的内容下推，自己设置在menuitems下面。我怎样才能做到这一点？我尝试将 ul 放入带有灯泡的 li 中，并尝试通过 css 将其获取到那里。是否可以将子菜单放在其他位置，但也可以将其与主菜单链接？

Answer 1

我不知道你是否绝对想使用ul li。如果没有，这就是我在没有 javascript 的情况下会怎么做。我会使用带有隐藏复选框的标签，并使用事件状态来显示/隐藏下面的 div。因此，您可以使用 css 轻松设置样式。这会将内容向下推并显示您想要的任何内容。在这种情况下，您的子菜单将通过向下推内容显示在您的图像下方。

Here是一个 jsfiddle。

希望对您有所帮助!