在CSS中没有列表的情况下制作一个dropdownmenu

Question

我想用CSS创建一个下拉菜单。我知道如何制作它，但HTML结构不同 我的结构是这样的：

所以最后我想让它像那样工作：
- 当您将鼠标悬停在menu1上时，第一个子菜单面板应该通过子菜单下拉。

CSS的{​​{1}}看起来像这样：

submenu_panel

有人可以帮我制作我的下拉菜单吗？

这是jsfiddle中的简短版本 https://jsfiddle.net/4bjk8opa/

Answer 1

这会对你有用吗。

Fiddle

 ul > li {display: block; float: left; margin-right: 10px; position: relative; background: Red; padding: 0.5em; line-height: 1em}
ul ul {display: none; width: 150px; position:absolute; top: 2em; left: 0}
ul ul > li {float: none;}
ul > li:hover > ul,
ul > a:hover + ul {display: block}

Answer 2

您必须更改HTML结构或使用JavaScript来实现此目的。您还要为height两次声明.submenu_panel。

Steevan的小提琴展示了你如何改变你的结构以使其适用于纯CSS。

要使其与jQuery一起使用，请在悬停时向要显示的链接添加ID #pn1Submenu，在这种情况下，我已经使用了＆＃34; target＆＃34;：

JS：

    $('#target').on('click', function() {
        $('#pn1Submenu').show();
    });

HTML：

    <a href="/" id="target" class="menu_link"...