html mobile navigation, ::after is wrong only on sub menu

Question

On my website that I plan to launch soon, I have a mobile layout that changes the navigation links and lists on the top and moves it to a navigation drawer. I am using some template that came with the website and that came with js scripts that controls all of that navigation.

Basically, there is text and then an arrow that is supplied by a tag. The JS code uses that arrow to slide the drawer into the next sub menu. I cannot get the text to link over to the drawer because of how the code is working and how the menu is generated (with my shopping basket software, MIVA).

So the solution that I came up with is using an ::after tag on the span class in the CSS code to expand the link past the text so you can click anywhere and it will take you to the next sub menu. It works for the first tier links when you first slide out the nav drawer, but the ::after tags all move to the top of the list for the sub menus. I tried messing with the position and float elements and nothing seems to line up right with all options.

Here is the code for the CSS class:

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

Here are some pictures:https://i.stack.imgur.com/z3oM4.jpg

Any help is appreciated.

Yes I am trying to hide the website stuff, it hasn't launched yet, this is a developer site.

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;
}