Question

要编辑这个，因为我是一个顽固的白痴谁已经看到他的方式的错误。关于如何在水平导航栏上创建下拉链接组的问题或多或少，但这一次，使用了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;}

然而，它仍然不完整，因为我不确定如何从这里进步。目前，此代码隐藏了显示在下拉菜单中的内容，但没有代码可以再次显示它。我见过的指南使用花车。这些绝对必要吗？

Answer 1

您仍然需要将下拉链接与其下级链接包装起来。像这样：

<强> 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。这只是一个粗略的例子，你需要调整一些对齐和类似的东西，但我认为你可以做到这一点。它主要是向您展示下拉动作是如何工作的。

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

1 个答案: