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

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

这是一个Demo

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

对于添加下拉菜单的方法，您可以将鼠标悬停在父元素上并将其包裹在子菜单周围。如果悬停事件被触发，里面的所有东西都可以选择 true :hover

喜欢:

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

我还添加了淡入效果。在那里你可以使用 css-transition。但要小心，如果你的子菜单将打开/关闭 display:block 和 :none 我猜它不会工作。

你可能会在那个 fiddle 中玩弄它，弄清楚你可以做什么以及你的更改如何影响输出。

.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;
}