CSS counter in hidden submenu

Question

I am trying to create a dropdown menu using nested <ul>

, each <li>

displaying a number generated with CSS counters.

Submenus are hidden display:none

unless they freeze.

My problem is that the counters don't increment when the item is display

set to a value none

.

Do you know a CSS property to prevent this?

If I replace display: none

with visibility: hidden

, it works, but I'm not sure if this is a good use for my menu, are there any pitfalls?

+3

FLX 10 Sep 14 at 12:59

1 answer

Harry · Accepted Answer · 2014-09-10T13:12:14+0000

You can match behavior display: none

(hidden) by setting font-size

to 0px and this will cause the item to be counted by the counter property.

.hidden{
    font-size: 0px;
}

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

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

Note: visibility: hidden

Will also work, but this will leave space equivalent to the height of one line in the output.