滑动可扩展的内联菜单

Question

我有一个简单（外观）菜单的概念，它使用 only 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，所有列表项都会向左浮动。

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

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

Answer 1

我可以想到两种方法：

1。使用a:focus + ul（IE a:active + ul）点击扩展菜单。

DEMO

优点：

• 它具有出色的浏览器支持：即使在IE8中也可以正常工作;有点在IE7，虽然你需要悬停链接看到 菜单扩展;
• 保留您当前的HTML结构，只需将tabindex='1'添加到您想要在点击时触发操作的链接（如展开的子菜单）

缺点：

• 您不能同时在“展开”状态下拥有多个子菜单;
• 它不是持久的;这意味着，一旦您点击页面中的其他位置，展开子菜单的链接就会失去焦点=＆gt;子菜单崩溃;

工作原理：

• a:focus选择具有焦点的链接（链接在点击后获得焦点并保持焦点，直到点击其他内容）
• a:focus + ul选择无序列表（ul），它是具有焦点的链接的兄弟（在这种情况下被点击后）并且紧跟在它之后（=之间没有其他元素）他们在HTML中 - 请参阅：adjacent sibling combinator
• a:focus + ul li选择作为上述无序列表后代的列表项
• a:focus + ul a选择上述无序列表后代的链接

---

2。使用复选框hack。

DEMO

优点：

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

缺点：

• 您需要更改HTML结构;
• 在IE8或更早版本中不起作用;

工作原理：

• input[type=checkbox]:checked选中已选中的复选框;这里隐藏了复选框（在其上设置display: none），但点击label会选中id与for属性的值相同的复选框已点击的label;
• input[type=checkbox]:checked ~ ul选择无序列表，该列表是已选中复选框的兄弟（不一定相邻） - 请参阅：general sibling combinator

Answer 2

将主要一个孩子设为

display:none;

并悬停在主要的

上

将它们设置为

display:block;