css - 滑动可扩展内联菜单

Question

我有一个简单(外观)菜单的概念，它使用仅 CSS 展开和缩回子菜单。

这是概念化的内容:

<ul>
    <li><a href="#">home</a></li>
    <li><a href="#">main one</a>
        <ul>
            <li><a href="#">sub one</a></li>
            <li><a href="#">sub two</a></li>
            <li><a href="#">sub three</a></li>
        </ul>
    </li>
    <li><a href="#">main two</a>
        <ul>
            <li><a href="#">sub one</a></li>
            <li><a href="#">sub two</a></li>
        </ul>
    </li>
    <li><a href="#">main three</a></li>
</ul>

我已经使用嵌套的无序列表对上面的基本框架进行了编码(忽略类、ID、管道符号等的缺失)，但我无法将所有内容保持内联。所有列表都是 list-style-type: none 并且所有列表项都向左浮动。

此外，我不知道如何防止自动换行，以便将整个列表项作为一个整体移动到一个新行，而不是分成两部分。

此外，我可以将什么属性与过渡属性结合使用，使嵌套列表在鼠标单击时滑出？

Answer 1

我可以想到两种方法:

1. 使用a:focus + ul(a:active + ul for IE)使菜单在点击时展开。

DEMO

优点:

• 它具有出色的浏览器支持:即使在 IE8 中也能正常工作；有点在 IE7 中，尽管您需要将鼠标悬停在链接上才能看到菜单展开；
• 保留您当前的 HTML 结构，您只需将 tabindex='1' 添加到您希望在点击时触发操作的链接(如展开的子菜单)

缺点:

• 不能同时有多个处于“展开”状态的子菜单；
• 它不是持久的；这意味着一旦您单击页面中的其他位置，展开子菜单的链接就会失去焦点 => 子菜单会折叠；

工作原理:

• a:focus 选择具有焦点的链接(链接在被点击后获得焦点并保持焦点直到其他东西被点击)
• a:focus + ul 选择无序列表 (ul)，它是具有焦点的链接的兄弟(在这种情况下被点击后)并且出现在右边在它之后(=它们之间没有其他元素)在 HTML 中 - 看这个:adjacent sibling combinator
• a:focus + ul li 选择作为上述无序列表后代的列表项
• a:focus + ul a 选择作为上述无序列表后代的链接

---

2. 使用复选框技巧。

DEMO

优点:

• 您可以同时展开多个子菜单；
• 它是持久的；当您单击页面上的其他位置时，展开的菜单不会折叠；

缺点:

• 您需要更改您的 HTML 结构；
• 不适用于 IE8 或更早版本；

工作原理:

• input[type=checkbox]:checked 选择选中的复选框；复选框隐藏在这里(设置display: none)，但是点击label会检查id与单击的 label 的 for 属性的值；
• input[type=checkbox]:checked ~ ul 选择无序列表，它是已选中复选框的兄弟(不一定相邻)- 参见:general sibling combinator