Question

所以我找到了这两个提示页面，其中解释了原理：使用：悬停以显示下拉菜单和复选框以将其切换为打开或关闭

我得到了很多工作但是当我来到CSS样式时我有问题。设置：悬停状态非常简单。简单的方法是设置切换的打开下拉菜单的样式，因为它来自父CSS选择器。我真的不想使用JavaScript。

所以我粘贴了我在JSfiddle上运行的代码。现在，复选框的位置并不重要。 My code

这部分（在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

制作＆＃34;教程＆＃34;可点击，使用连接到chktut的标签：

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

要隐藏该复选框，请将其设置为无：

#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 fiddle上做的事情似乎奏效了。我做过造型和机制。希望它可以帮助某人。它对移动设备非常有用（因此他们可以快速浏览所有页面而无需加载Javascript或在页面上直接将其留给子页面，他们真正想去的地方。）

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

纯HTML和CSS可切换下拉菜单

3 个答案: