我已经尝试了好几天了，到目前为止，到目前为止，在使下拉菜单正常工作方面我还没有真正取得进展，尽管部分原因是我阅读的所有指南都使用了我不熟悉的CSS，例如波浪号和'greather than'符号。无论如何，这是我拥有的基本代码：
<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来使下拉列表显示？
这是一个演示
首先，您需要了解CSS选择器的工作方式。
对于添加Dropdown的方式，您可以将鼠标悬停在父元素上，然后将其包装在子菜单中。比起触发悬停事件，里面的所有东西都可以选择true：hover
喜欢：
.nav li:hover .sub-menu {
left: 0;
top: 100%;
}
我还添加了淡入效果。在那里为您使用css-transition工作。但是要小心，如果您的子菜单将通过display：block和：none打开/关闭，我想这是行不通的。
您可能会在这种提琴演奏中摸索，以弄清楚您可以做什么以及您的更改如何影响输出。
.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;
}
本文收集自互联网，转载请注明来源。
如有侵权，请联系[email protected] 删除。
我来说两句