Question

We have a subnavigation with several UL elements with li's with UL elements in it.

Consider the following:

<ul>
    <li> <a href="#">link level 1</a>

        <ul>
            <li> <a href="#">link level 2</a>

            </li>
            <li> <a href="#">link level 2</a>

                <ul>
                    <li> <a href="#">link level 3</a>

                    </li>
                </ul>
            </li>
        </ul>
    </li>
</ul>

We need an arrow behind all of the anchor tags, except on level 3.

I now have the following CSS, but this only displays the arrow icon behind level 2.

ul {
    padding:20px 0 0 0;
    ul {
        padding: 0;
        margin-left: 13px;
        & > li {
            list-style-type: none;
            & > a:not(:last-child):after {
                margin-top:3px;
                content:"\E259";
                font-family:'Glyphicons Halflings';
                text-align:right;
                font-size: 10px;
                float:right;
            }
        }
    }
}

This draws the icon where a is not the last element. But we also need to have the arrow behind level 1, which according to this CSS is the last element, so the arrow icon is not drawn.

How can we solve this?

Answer 1

You need to update your LESS to (please note I've updated the font & content so I didn't have to import glyphs font):

ul {
    padding:20px 0 0 0;
    & > li {
            list-style-type: none;
            & > a:not(:last-child):after {
                margin-top:3px;
                content:">";
                font-family:'arial';
                text-align:right;
                font-size: 10px;
                float:right;
            }
        }
    ul {
        padding: 0;
        margin-left: 13px;
    }
}

Note that the ">" is at the far right hand side of the output window. See working example here: https://jsfiddle.net/6duxLkc4/

Check if li has ul

1 个答案: