Utilizing CSS counters for tracking hidden submenus

Attempting to create a dropdown menu with nested <ul> tags, each <li> containing a number generated using CSS Counters.

Sub-menus remain hidden with display:none until hovered over.

The issue arises when the counters do not increment for elements with display: none.

Are you familiar with any CSS properties that can address this problem?

Replacing display: none with visibility: hidden resolves the counter issue, but concerns about potential drawbacks arise. Are there pitfalls associated with using this method in my menu design?

cssmenucountercss-counter

Answer №1

To achieve a hidden effect similar to display: none, you can set the font-size to 0px, which will still allow the element to be counted by the counter property.

.hidden{
    font-size: 0px;
}

See Demo

Alternatively, there is a more complex version suggested by Hashem Qolami in the comments:

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

View Demo 2

Note: While visibility: hidden is another option, it will still occupy space equivalent to the height of one line in the output.

See Demo using Visibility Property

Similar questions

If you have not found the answer to your question or you are interested in this topic, then look at other similar questions below or use the search

Tips for customizing scroll bar padding and margin using CSS classes or IDs

I am looking to customize three different types of scrollbars with unique padding and margins. Here is the global style for my scrollbars: /* Modifying the scroll bar across the whole application */ /* width */ ::-webkit-scrollbar { width: 5px; he ...

htmlcss

Troubleshooting hidden element display issues in IE7 with JQuery

My show/hide function is not working in IE7, however it works fine in other browsers. Can someone please assist me? Am I doing something incorrectly? <div id="secondary_nav" class="box"> <ul> <li>< ...

javascriptjqueryhtmlcssinternet-explorer-7

CSS error with contrasting colors, the reason behind it is unknown

Here is the code snippet I am working on: I have set the background color to #f1f5ff and the font color to #181818. Despite thinking that the contrast is good, I am still encountering an error where the text is not visible. I have tried changing 'c ...

htmlcss

Looking for some guidance on JavaScript and CSS

I have a JavaScript function that animates clouds moving across the screen. I am trying to restrict the area they cover to only occupy the top 300px of the screen. I attempted to add "height:300px; top:0px;" to the DIV style, but it didn't produce th ...

javascriptcss

Display a variety of images when hovering over different elements

I have a logo in various colors that I want to cycle through on hover. The default image is black, then changes to red on the first hover, yellow on the second hover, and blue on the third hover. This cycle continues back to black and repeats. Any suggesti ...

javascriptjqueryhtmlcss

Positioning elements vertically and float them to the left side

I'm struggling to grasp the concept of the float attribute. Here's the code that is causing me confusion: #p1 { border: solid black 3px } <p id="p1" style="float:left">Paragraph 1</p> <a href="https://facebook.com" style="floa ...

htmlcss

Comparing CSS properties: display:block; and display:table;

Are there distinctions between using display:block; versus display:table;? It seems that the display type of the DOM node containing table-row and table-cell nodes is inconsequential. According to MDN, applying display:table; makes it behave like a table, ...

htmlcsshtml-table

Different ways to alter the color of contextual color classes in Bootstrap 5

Currently working on my project with Bootstrap 5, I've been incorporating elements featuring classes such as btn-primary and text-success. In Bootstrap, the -primary class is associated with blue, while -success corresponds to green, among others. I&a ...

csstwitter-bootstrapbootstrap-5

Tips for selectively applying CSS to a single HTML file

I'm currently working on a website utilizing AngularJS and Plangular to develop a unique Soundcloud Player. This is how I incorporate my template: <body> <div id="container"> <div id="header" ng-controller="HeaderCtrl"><div ...

htmlcssangularjs

Unable to display ChartJs within the same DIV on the webpage

I'm struggling to display the Pie Chart from ChartJs in the correct DIV when I click from the left DIV. Running the chart directly works fine, but I want them both on the same page in separate DIVs. I have separate HTML files for each link and they wo ...

javascriptjqueryhtmlcsschart.js

Manually controlling line breaks in HTML text

When collaborating with designers, they often have strong opinions about word wrapping in the final HTML page. If I am working on a fixed layout (non-responsive) and the designer is not satisfied with how the text wraps, there are several options available ...

javascripthtmlcssword-wrap

Fixed Navigation - Employing stickUp.js extension

* { box-sizing: border-box; } body { margin: 0; padding: 0; font-weight: 500; font-family: 'Helvetica Neue', sans-serif; } main {} .bckgrnd { background-position: center center; background-repeat: no-repeat; background-attachment: ...

javascriptjqueryhtmlcss

Using Jquery fadeIn along with responsive CSS media queries

Issue at Hand: An issue arises with my navigation bar and text block animations. The fading effect applied on the text element causes inline styles to be added, thus disrupting the media query set to hide the text on smaller screens. If you disable the s ...

jquerycss

What is the reason behind v-container in vuetify.js automatically setting the fluid property when zoomed to 67%?

I have encountered an issue with vuetify where the v-container automatically takes full width at 67% zoom of the browser, even though I have not used the fluid property. It seems to work fine for the rest of the cases. <v-container> < ...

cssvue.jsgridvuetify.js

React CSS modules are a powerful tool for styling components in

Having some difficulty with css modules in react, I am unsure how to utilize react modules dynamically. import classnames from 'classnames' import styles from './hover.module.css /// /// const [flashElements,setFlashElements]=useState(elemen ...

javascriptcssreactjs

The issue with importing fonts in CSS causing an error is encountered when utilizing an exported Angular library

I have a components library for Angular that relies on line-awesome icons. To include the necessary fonts and styles, I am using a CDN in the main SCSS file as shown below: @import url('https://fonts.googleapis.com/css2?family=Nunito:wght@200;300;400; ...

cssangularsassfonts

The navigation bar's background color remains static and doesn't update as

Struggling with HTML/CSS and unable to get the NAV bar to display the specified background color. Tried putting the nav in a class, commented out parts of the code, but still couldn't make it work. Despite looking for solutions, I can't figure ou ...

htmlcss

What causes the top and left border to appear as separate lines instead of a single line?

div { border: 1px solid red; } .one { height: 20px; width: 20px; } .two { height: 30px; width: 30px; } <div class="one"> <div class="two"> </div> </div> Within the structure of a DOM tree, the .two div is classified a ...

htmlcss

My code is designed to operate exclusively on the initial element containing an ID

Check out this screenshot to see what I'm aiming for. I discovered a solution online that might help me achieve my goal. To test the solution, I set up a simple HTML structure like this: <div id="block"> <img id="img& ...

javascripthtmlcssrgb

How about trying out the magic of Bootstrap columns?

My issue pertains to bootstrap columns. Whenever I zoom in on the browser, the columns start overlapping and the text from col-md-7 ends up over the image. Does anyone know of a solution to this problem? <div class="row"> <div class="col-md-5 ...

htmlcssbootstrap-4