javascript - html 移动导航,::after 仅在子菜单上是错误的

Question

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

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

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

这是 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

感谢任何帮助。

是的，我正在尝试隐藏网站内容，它尚未启动，这是一个开发者网站。

Answer 1

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

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

.mobile-navigation ul li span.next{
    position:relative;
}