CSS counter on hidden submenu

Question

I'm trying to make a dropdown menu using nested <ul>, every <li> displaying a number generated with CSS Counters.

Sub-menus are hidden with display:none when not hovered.

My problem is that counters are not incremented when an element has display set to none.

Do you know a CSS property to prevent this?

If I replace display: none by visibility: hidden, it's working but I'm not sure if it's nice to use this for my menu, are there any traps?

Answer 1

You can mimick the display: none (hidden) behavior by setting the font-size to 0px and this would make the element be counted by the counter property.

.hidden{
    font-size: 0px;
}

Demo

---

Or, a bit more complex version of the above (mentioned by Hashem Qolami in comments)

.hidden{
    font: 0/0 a; 
    visibility: hidden;
}

Demo 2

---

Note: visibility: hidden would also work but it would leave a space equivalent to the height of one line in the output.

Demo using Visibility Property