Question

在我计划即将推出的网站上，我有一个移动布局，可以更改顶部的导航链接和列表，并将其移动到导航抽屉。我正在使用网站附带的一些模板，以及控制所有导航的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

感谢任何帮助。

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

Answer 1

I know this is a very old question, but I came across it while looking for a solution to a similar problem.

The .next needs to be relatively positioned in order to your absolute positioned ::after to work in the way you want:

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

html移动导航，::之后仅在子菜单

1 个答案: