纯HTML和CSS可切换下拉菜单

Question

因此，我找到了解释该原理的两个提示页面：使用：hover使下拉菜单显示，并使用复选框将其打开或关闭

我花了很多时间来工作，但是当我谈到CSS样式时遇到了问题。 设置：hover状态的样式非常简单。 不是那么简单的是设置切换后的打开下拉菜单的样式，因为父CSS选择器在哪里。 我真的不想使用JavaScript。

因此，我将需要粘贴的代码粘贴到JSfiddle上。 复选框的位置目前并不重要。 我的密码

这部分（在CSS的底部）就是问题。

nav ul li #chktut:checked:parent {
        background: #4b545f;
        background: linear-gradient(top, #4f5964 0%, #5f6975 40%);
        background: -moz-linear-gradient(top, #4f5964 0%, #5f6975 40%);
        background: -webkit-linear-gradient(top, #4f5964 0%,#5f6975 40%);
    }

Answer 1

要使“教程”可单击，请使用连接到chktut的标签：

<li><input type="checkbox" id="chktut" /><label for="chktut">Tutorials</label>

要隐藏该复选框，请将其显示设置为none：

#chktut{
   display: none;
}

Answer 2

我做了这个。 它易于样式设置，不使用任何JavaScript，而且响应迅速：D

<!doctype html>
<html>
    <head>
        <title>teste</title>
        <style>
            .dropdown_link {
                background-color: #000;
                color: #eee;
                display: block;
                padding: 5px;
            }

            .fullWidth {
                width: 100%;
            }

            .hover:hover {
                background-color: #408FFF;
            }

            .menu_container {
                border: 0;
                margin: 0 0 10px 0;
                padding: 0;
            }

            .menu_dropdown_container:hover ul {
                display: table;
            }

            .menu_dropdown_list {
                display: none;
                padding: 0;
                position: absolute;
            }

            .menu_item {
                display: table-cell;
                background-color: #eee;
                text-align: center;
            }

            .menu_link {
                background-color: #6FA8F7;
                color: #eee;
                display: block;
                padding: 10px 0;
                width: 100%;
            }

            .menu_list {
                display: table;
                margin: 0;
                padding: 0;
            }

            .no_decoration {
                text-decoration: none;
            }

            .no_bullets {
                list-style: none;
            }

            @Media screen and (max-width:480px) {
                .menu_item, .dropdown_item, .menu_dropdown_list {
                    display: block;
                    width: 100%;
                }

                .menu_dropdown_list {
                    position: static;
                }
            }
        </style>
    </head>
    <body>
        <div class="menuContainer fullWidth">
            <ul class="fullWidth menu_list no_bullets">
                <li class="menu_item">Your logo here</li>
                <li class="menu_item"><a class="menu_link hover no_decoration" href="#">Home</a></li>
                <li class="menu_item menu_dropdown_container">
                    <a href="#" class="menu_link hover no_decoration">Products</a>
                    <ul class="menu_dropdown_list no_bullets">
                        <li class="dropdown_item"><a class="dropdown_link no_decoration" href="#">For your home</a></li>
                        <li class="dropdown_item"><a class="dropdown_link no_decoration" href="#">For your enterprise</a></li>
                        <li class="dropdown_item"><a class="dropdown_link no_decoration" href="#">For babies</a></li>
                        <li class="dropdown_item"><a class="dropdown_link no_decoration" href="#">For Flying cats trying to conquer the world</a></li>
                    </ul>
                </li>
                <li class="menu_item"><a href="#" class="menu_link hover no_decoration">Company</a></li>
                <li class="menu_item"><a href="#" class="menu_link hover no_decoration">Blog</a></li>
            </ul>
        </div>
    </body>
</html>

Answer 3

因此，我对JS小提琴所做的工作似乎奏效。 我已经完成了样式和机制。 希望它可以帮助某人。 这对于移动设备非常有用（因此，他们可以快速浏览所有页面，而无需加载Javascript或进入页面以将其直接留给他们真正想要访问的子页面。）

my code is entirely on JS Fiddle, no rights or anything is required to use, it's free, take it.