滑动可扩展内联菜单

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（IE 为a:active + ul）使菜单在点击时展开。

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

Answer 2

将主要的一个孩子设置为

display:none;

在主要的悬停时

将它们设置为

display:block;