javascript - 以垂直列表的形式创建一个切换菜单

Question

我正在尝试创建一个切换菜单，我有一个菜单，当我点击它时会展开，当我再次点击它时会关闭。

它的HTML代码是

<label for="menu-toggle"><img src="icons/navicon.png"></label>
<input type="checkbox" id="menu-toggle"/>
    <ul id="menu">
        <li><a href="#">First link</a></li>
        <li><a href="#">Second link</a></li>
        <li><a href="#">Third link</a></li>
    </ul>   

CSS 是

<style>
label
    {
        cursor: pointer;
    }
#menu-toggle 
    {
        display: none; /* hide the checkbox */
    }
#menu 
    {
        display: none;
    }
#menu-toggle:checked + #menu 
    {
        display: block;
    }
</style>

开关看起来像这样

当我点击 3 行图像时，它看起来像这样

我希望当我点击 3 行图像时，菜单应该显示在一个垂直列表中，在一个白色背景的 block 中。像这样

谁能告诉我怎么做

Answer 1

图片在这里看不到。但您可以做的是为 block 设置背景颜色和宽度标记的 css。

有点像

#menu
{
显示:无；
宽度:30%；
背景色:绿色；