html - 无法将我的菜单变成下拉菜单

Question

刚刚完成我的第一个菜单样式左侧导航栏的设计。是否可以使此菜单在没有 javascript 的情况下悬停时具有下拉效果？我找到的大多数答案都不适合我，因为我可能使用了错误的代码来构建真正的菜单。

在示例中，类别“Heren armbanden”是主要类别。当悬停在“Heren armbanden”上时，它下面的 6 个类别应该会下拉。

希望有办法让这项工作成功。欢迎提出任何建议!

Answer 1

虽然您确实说过您正在寻找纯 CSS 解决方案，但您在评论中表示您不会反对 JS 解决方案，我认为这是使用 Javascript 解决您的问题的先决条件(在特别是 jQuery)。

首先，我创建了一个 menu 类，用于包围下拉菜单标题和菜单内容。

<div class="menu">
    <div class="container25-a">
        <div class="links8">Heren armbanden</div>
    </div>
    <br>
    <div class="heren-armbanden">
        <div class="container25-a">
            <div class="links4">Schakel armbanden</div>
        </div>
        <div class="container25-a">
            <div class="links4">Leren armbanden</div>
        </div>
        <div class="container25-a">
            <div class="links4">Stalen armbanden</div>
        </div>
        <div class="container25-a">
            <div class="links9">Rubberen armbanden</div>
        </div>
        <div class="container25-a">
            <div class="links4">Graveerbare armbanden</div>
        </div>
        <div class="container25-a">
            <div class="links4">Zilveren armbanden</div>
        </div>
    </div>
</div>

接下来，我创建了一个 CSS 选择器属性，默认情况下从 View 中隐藏类 heren-armbanden。

.heren-armbanden {
    display: none;
}

最后，我使用 jQuery 为 menu 类添加监听器，并在鼠标进入和离开菜单类时更改 heren-armbanden 类的可见性。

$('.menu').hover(function () {
    $('.heren-armbanden').show();
}, function () {
    $('.heren-armbanden').hide();
});

总而言之，您的解决方案如下所示:

http://jsfiddle.net/bxeh6/8/

编辑:根据要求，这里是如何在点击而不是悬停时执行这些操作:

为要点击的链接添加不同的class或id:

<div class="links8" id="nav">Heren armbanden</div>

然后，添加一个事件来监听点击:

$('#nav').click(function () {
    $('.heren-armbanden').toggle();
});

演示:http://jsfiddle.net/bxeh6/9/