1

在我计划很快推出的网站上，我有一个移动布局，可以更改顶部的导航链接和列表，并将其移动到导航抽屉。我正在使用网站附带的一些模板，以及控制所有导航的 js 脚本。

基本上，有文本，然后是标签提供的箭头。JS 代码使用该箭头将抽屉滑入下一个子菜单。由于代码的工作方式和菜单的生成方式（使用我的购物篮软件 MIVA），我无法将文本链接到抽屉。

所以我想出的解决方案是在 CSS 代码中的 span 类上使用 ::after 标记将链接展开到文本之外，这样您就可以单击任意位置，它将带您进入下一个子菜单。当您第一次滑出导航抽屉时，它适用于第一层链接，但 ::after 标记全部移动到子菜单列表的顶部。我尝试弄乱位置和浮动元素，但似乎没有什么能与所有选项对齐。

这是 CSS 类的代码：

.mobile-navigation ul li span.next::after{
                                    content: "";
                                    position:absolute;
                                    /*padding:50px;*/
                                    left: -200px;
                                    right:0px;
                                    top: 0px;
                                    bottom: 0px;
                                    max-height: 56px;

以下是一些图片：http: //imgur.com/a/mKYoo

任何帮助表示赞赏。

是的，我试图隐藏网站内容，它还没有启动，这是一个开发者网站。

4

1 回答 1

1

我知道这是一个非常古老的问题，但我在寻找类似问题的解决方案时遇到了它。

.next 需要相对定位，以便您的绝对定位 ::after 以您想要的方式工作：

.mobile-navigation ul li span.next{
    position:relative;
}
于 2016-04-04T17:58:06.563 回答