html - 使用 CSS3 创建淡入下拉导航栏按钮

Question

要编辑这个，因为我是一个顽固的白痴，看到了他的方式的错误。关于如何在水平导航栏上创建下 zipper 接组的问题大致相同，但这次使用 ul 和 li。

到目前为止，我取得了如此大的进步:

<nav>
    <ul class="width">
        <li><a ...</li>
        <li><a ...
            <ul>
                <li><a ...</li>
                <li><a ...</li>
                <li><a ...</li>
            </ul>
        </li>
        <li><a ...</li>
    </ul>
</nav>

CSS:

nav ul{width:100%;text-align:justify;font-size:0;}
nav ul:after{content:"";width:100%;display:inline-block;}
nav li{list-style:none;display:inline-block;}
nav a{display:inline-block;padding:10px;}
nav ul ul{display:none;}

但是，它仍然不完整，因为我不确定如何从这里取得进展。目前此代码隐藏了将出现在下拉菜单中的内容，但没有代码使其再次可见。我见过的指南使用 float 。这些是绝对必要的吗？

Answer 1

您仍然需要将下 zipper 接与其从属链接包装起来。像这样:

HTML:

<nav class="bg">
    <div class="navwrap width">
        <div class="nav">
            <a href="#">Link1</a>
            <div class='dropdown'>
                <a href="#">Link2</a>
                <div class='droplinks'>
                    <a href='#'>Drop Link 1</a>
                    <a href='#'>Drop Link 1</a>
                </div>
            </div>
            <a href="#" id="dropdown2">Link3</a>
            <a href="#">Link4</a>
        </div>
    </div>
</nav>

新 CSS:

.dropdown{
    padding: 0;
    position:relative;
    width: 100px;
    display:block;
    float:left;
}
.dropdown a {
    width: 100%;
}
.droplinks{
    position:absolute;
    top:100%;
    left:0;
    display:none;
    height:0;
    transition: height 0.2s linear;
}
.dropdown a:hover ~ .droplinks{
    display:block;
    height: 150px;
}
.droplinks:hover {
    display:block;
    height: 150px;
}

查看此 fiddle .这只是一个粗略的例子，你需要调整一些对齐方式等等，但我认为你可以做到。它主要是向您展示下拉 Action 是如何工作的。