是否可以仅使用CSS显示下拉菜单？

Question

有没有人试过制作或看到一个只有CSS而没有javascript的下拉菜单。

因此，单击a开关将显示下拉式(而不是悬停)，然后下拉式将隐藏在鼠标架上。

我认为可以使用:悬浮和:active sates的组合，但是我无法使它工作。

我知道使用javascript可以很容易地实现这一点，但是我希望它能够与纯CSS一起工作。

谢谢

编辑:有许多例子的下拉:悬停，我还没有看到一个例子，一个点击触发的css下拉列表。

Answer 1

我让它起作用了！我不确定这是否是最好的解决方案，但似乎效果很好。

我使用了一个:active处理程序来显示隐藏菜单，该菜单位于按钮的顶部，允许您继续使用:悬浮处理程序显示菜单。

这是小提琴：http://jsfiddle.net/alsweeet/ycYg7/

HTML：

<div id="dd">
    <a href="#" id="button">Select Language</a>
    <ul>
        <li>English</li>
        <li>French</li>
        <li>German</li>
        <li>Spanish</li>
    </ul>
</div>

CSS：

ul{
    display: none;
    position: relative;
    top: -55px;
    padding: 55px 0 0 0;
    margin: 0;
}

ul:hover{
    display: block; 
}

li{
    background: #ddd;
    padding: 10px;
    list-style: none;.
}

li:hover{ 
    background: #eee;
    cursor: pointer;
}

#button{
    display: inline-block;
    padding: 10px;
    background: #ccc;
    color: white;
}

#dd{
    display: inline-block;
}

#dd:active ul{
    display: block;
} 

#dd:aactive ul:hover{
    display: block;
}

#dd:active #button{
    display: inline-block;
    padding: 10px;
    background: #ccc;
    color: white;
}

Answer 2

这是我从先前的一个问题中得到的一个很棒的小提琴。

真正的魔力就在css的这条线后面，

[type=radio]:checked ~ .content {
   z-index: 1;
}

这是在单击相应的单选按钮时添加1的z-index。由于下面的主体比其他部分得到了z索引，所以它使该节活动起来。

这不是一个下降，我提供了一个工作的例子，这是由你来决定你的情况。:}

JSFIDDLE

下面是我修改的JSFIDDLE，以显示如何使用css在单击时显示/隐藏。

[type=radio]:checked ~ .content {
   display: block;
}