2

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

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

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

4

2 回答 2

2

我可以想到两种方法：

1.使用a:focus + ul（a:active + ul对于IE）使菜单在点击时展开。

演示

优点：

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

缺点：

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

它是如何工作的：

  • a:focus选择具有焦点的链接（链接在单击后获得焦点并保持焦点直到单击其他内容）
  • a:focus + ul选择无序列表ul（
  • a:focus + ul li选择作为上述无序列表后代的列表项
  • a:focus + ul a选择作为上述无序列表后代的链接

2.使用复选框破解。

演示

优点：

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

缺点：

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

它是如何工作的：

  • input[type=checkbox]:checked选中选中的复选框；复选框隐藏在这里（设置display: none在它们上面），但是单击 a会选中与单击的属性值相同label的复选框；idforlabel
  • input[type=checkbox]:checked ~ ul选择作为选中复选框的兄弟（不一定相邻）的无序列表 - 请参阅：通用兄弟组合器
于 2012-09-05T12:06:38.460 回答
0

将主要的一个孩子设置为

display:none;

和主要的悬停

将它们设置为

display:block;
于 2012-09-05T11:26:16.090 回答