3

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?

Harry
  • 87,580
  • 25
  • 202
  • 214
FLX
  • 2,626
  • 4
  • 26
  • 57
  • show some code what have you tried. A fiddle will be appreciated – Benjamin Sep 10 '14 at 13:01
  • Maybe change the `height` instead of the `display` property? – Luke Sep 10 '14 at 13:02
  • possible duplicate of http://stackoverflow.com/questions/14049423/in-css-use-displaynone-on-the-element-but-keep-its-after – Holybreath Sep 10 '14 at 13:02
  • 1
    `font-size: 0px;` like [this](http://jsfiddle.net/qdcqtocc/)? – Harry Sep 10 '14 at 13:03
  • 1
    @Harry Or a bit more [complex version](http://jsfiddle.net/hashem/qdcqtocc/1/): `font: 0/0 a; visibility: hidden;` – Hashem Qolami Sep 10 '14 at 13:05
  • @Harry, in fact it's already working with visibility:hidden alone. I just want to be sure that I will not have unwanted side effect by using this instead of display. – FLX Sep 10 '14 at 13:10
  • @FC': Visibility would also work but it would leave a space equivalent to the height of one line which can be avoided by using the font/font-size methods. – Harry Sep 10 '14 at 13:11
  • Ok. I don"t think it's useful in this case because submenus's position is absolute, but thanks for the tip. – FLX Sep 10 '14 at 13:14
  • 1
    Harry, I mean it's already perfect with only visibility, because submenus are out of the flow. But if they were not, I would use that :) – FLX Sep 10 '14 at 13:21

1 Answers1

4

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

Community
  • 1
  • 1
Harry
  • 87,580
  • 25
  • 202
  • 214