Question

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

在示例中，类别＆＃34; Heren armbanden＆＃34;是主要的类别。当它悬停在＆＃34; Heren armbanden＆＃34;时，它下面的6个类别应该下拉。

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

Answer 1

我道歉，我无法从我目前的位置打开你的例子。使用CSS进行下拉菜单的关键是样式中的Display属性。对于纯CSS下拉菜单，您可以使用

为菜单制作UL

ul{Disply:none;}

和

UL:hover{display:block;}

Answer 2

在CSS中下载导航实际上非常简单。但是，您需要对代码进行一些更改。

您的代码的主要问题是带有向下箭头的菜单项（我假设显示下拉列表）与其下拉对应项无关。更具体地说，名为Heren sieraden 的顶级菜单项不包含与子项Heren armbanden的关系。此外，Schakel armbanden未包含Heren armbanden元素。

当我说“包含”时，我的意思是在标记内项目是“在同一级别”（兄弟姐妹）。 CSS无法以这种方式关联对象。相反，你需要嵌套它们，以便你的CSS可以先查看顶部元素，看看你是否将它们悬停在它们上面，然后隐藏它们包含的子菜单。

为了让纯CSS工作，您需要重新构建代码。

其他一些答案已经解释了非常受欢迎的ul和li解决方案。它很受欢迎 - ul元素用作“菜单”，li元素用作“项目”。以下是一个例子：

（未显示冗余类）

ul.menu
  li.item
    a
  li
    a
    ul.sub-menu
      li.item
        a
      li
        a
  li
    a

上面，你有ul.menu。这是您的主菜单。第二个li元素包含ul.sub-menu。这是您的子菜单（下拉列表）。

您当前代码的主要问题是a:hover选择器在这里没用。如果将鼠标悬停在某个链接上，您可以想象出现子菜单，对吗？但是当您将鼠标悬停在链接之外时，子菜单将关闭。这就是您需要使用ul > li > ul结构的原因。您可以使用div，但ul / li更常见。

关键是不要将:hover选择器分配给a元素，而是分配给li元素。这是因为li元素包含 a和ul元素。因此，无论您将鼠标悬停在链接还是子菜单上，您仍然会将鼠标悬停在li上。

因此，要使您的下拉列表工作，您需要使用类似的内容：

ul.menu li.item ul.sub-menu       { display: none;  }
ul.menu li.item:hover ul.sub-menu { display: block; }
/* note: these selectors can certainly be simplified */

现在，当您将鼠标悬停在容器上时，会出现子菜单。

定位子菜单通常是通过为li.item元素提供相对位置（位置：相对），然后为ul.sub-menu元素提供绝对位置（位置：绝对值）来完成的。这允许您将子菜单放在菜单项下面。

li.item { position: relative; }
ul.sub-menu {
    position: absolute;
    top: 100%;
    left: 0;
}

上面的CSS会将您的子菜单放在它所在的菜单项的左下角。子菜单将向下扩展到右侧。

Answer 3

虽然您确实说过您正在寻找一个纯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选择器属性，默认情况下会隐藏类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/

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

在要点击的链接中添加其他类或ID：

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

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

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

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

无法将菜单变为下拉菜单

3 个答案: