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?
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;
}
Or, a bit more complex version of the above (mentioned by Hashem Qolami in comments)
.hidden{
font: 0/0 a;
visibility: hidden;
}
Note: visibility: hidden would also work but it would leave a space equivalent to the height of one line in the output.