纯 HTML 和 CSS 可切换下拉菜单答案

【问题标题】：Pure HTML and CSS toggleable drop-down menu纯 HTML 和 CSS 可切换下拉菜单
【发布时间】：2014-04-28 20:33:24
【问题描述】：

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

我完成了一些工作，但是当我谈到 CSS 样式时我遇到了问题。设置 :hover 状态的样式非常简单。不那么简单的是设置切换打开下拉菜单的样式，因为父 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%);
    }

【问题讨论】：

如果不修改父元素的类名，就无法保持状态。为此，您需要使用 JavaScript。
这是两个网站：line25.com/tutorials/how-to-create-a-pure-css-dropdown-menu leslievarghese.com/click-events-using-pure-css
如果我把输入放在 li 外面然后我可以选择 li 和 li 子 ul 呢？它真的不需要在 li 里面...

标签： html css drop-down-menu

【解决方案1】：

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

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

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

#chktut{
   display: none;
}

【讨论】：

菜单的一部分需要是切换按钮，另一部分需要是指向另一个页面的链接，但我现在用我的 js fiddle 搞定了

【解决方案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>

【讨论】：

【解决方案3】：

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

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

【讨论】：