Question

我一直试图在几天内做到这一点，到目前为止，我还没有真正取得进展下拉列表的进展，但部分因为我读过的指南都在使用CSS中我不熟悉的符号，例如代字号和“比符号更好”的符号。无论如何，这是我的基本代码：

<nav class="bg">
    <ul class="width">
        <li><a href="#">Link</a></li>
        <li><a href="#"></a>
            <ul>
                <li><a href="#" title="link">Link</a></li>
                <li><a href="#" title="link">Link</a></li>
            </ul>
        </li>
    </ul>
</nav>

CSS：

.width{margin:0 auto;min-width:1000px;width:84%;}
nav ul{width:100%;text-align:justify;font-size:0;position:relative;}
nav ul:after{content:"";width:100%;display:inline-block;}
nav li{list-style:none;display:inline-block;}
nav a{display:inline-block;padding:10px;}

我认为下一步是将display:none;置于内部<ul>元素上以默认隐藏它们，但下一部分是我迷失的地方。当另一个对象发生其他事件时，你如何使用CSS使一个对象做某事？在这种情况下，当相关链接悬停时，您将如何使用CSS来显示下拉列表？

Answer 1

您甚至可以在不使用任何选择器的情况下创建下拉列表。但了解选择器非常重要。通过 this link 了解有关选择器的更多信息。

您可以查看 Pure CSS Dropdown Menu ，了解如何使用css创建下拉菜单。

Answer 2

你自己正确地指出了问题，那就是：

如何使用CSS让一个对象在其他东西上做某事发生在另一个对象？

我认为这个最简单的demo会对你的上述问题有所了解。

特别是在演示中深入了解CSS。

#circle:hover .popup{
    display : block;
}

Answer 3

当另一个对象发生其他事件时，如何使用CSS使一个对象做某事？在这种情况下，当相关链接悬停时，您将如何使用CSS来显示下拉列表？

li > a ul { display: none; }
li > a:hover ul { display: block; }

您还可以播放with transitions以添加淡入效果。

Answer 4

这是Demo

首先，您需要了解CSS选择器的工作原理。

对于添加下拉列表的方法，您可以将鼠标悬停在父元素上并将其包裹在子菜单周围。如果悬停事件被触发，那么内部的所有内容都可以选择true：hover

像：

.nav li:hover .sub-menu {
     left: 0;
     top: 100%;
 }

我还添加了淡入效果。你在那里使用css-transition。但要小心，如果您的子菜单将打开/关闭显示：阻止和：无，我猜不会。

你可以在那个小提琴中玩弄你可以做的事情以及你的改变如何影响输出。

.nav .sub-menu {
      position: absolute;
      left: -1000px;
      top: -1000px;
      opacity: 0;
      -o-transition: opacity .25s;
      -ms-transition:  opacity .25s;
      -moz-transition: opacity .25s;
      -webkit-transition: opacity .25s;
      transition: opacity .5s;
}

.nav li:hover .sub-menu {
      left: 0;
      top: 100%;
      opacity: 1;
}

在具有淡入效果的水平导航栏上创建CSS3下拉菜单

4 个答案: