Question

I have a navigator on my site, made of <ul> elements:

<div class="navigator">
    <ul>
        <li class="nav-item nav-parent nav-expanded">Category One
            <ul>
                <li class="nav-item nav-parent nav-collapsed">Subcategory One</li>
                <li class="nav-item nav-parent nav-collapsed">Subcategory Two</li>
                <li class="nav-item nav-parent nav-collapsed">Subcategory Three</li>
                <li class="nav-item nav-parent nav-expanded">Subcategory Four
                    <ul>
                        <li class="nav-item nav-expanded">Item 4-1</li>
                        <li class="nav-item nav-selected">Item 4-2</li>
                        <li class="nav-item nav-expanded">Item 4-3</li>
                    </ul>
                </li>
                <li class="nav-item nav-parent nav-collapsed">Subcategory Five</li>
            </ul>
        </li>
        <li class="nav-item nav-collapsed">Category Two</li>
        <li class="nav-item nav-collapsed">Category Three</li>
        <li class="nav-item nav-collapsed">Category Four</li>
    </ul>
</div>

Expanded and collapsed elements differ in a mark “+” or “-” made by following rules of css:

li.nav-expanded:before {
    content: "- ";
}
li.nav-collapsed:before {
    content: "+ ";
}

It looks fine in Firefox:

But it looks weird in Chromium:

Why is this weird – because it fixes with strange action in Developer tools:
I choose li.nav-item element, change display: list-item to display:inline and back to display:list-item. And it looks fine.

I don’t understand, how to fix this? Is this Chromium bug?

Answer 1

<ul> that are inside the <li> should be display: list-item too. So making:

li.nav-item ul, .navigator ul {
    display: list-item;
}

fixed the problem in Chromium.