Issues with the menu pop-up functionality arise when utilizing the CSS class .active

Question

Issues with the menu pop-up functionality arise when utilizing the CSS class .active

When I have this code, the ".active" function doesn't work when clicked. However, if I change the div class from "top-menu-popup" to "top-menu-popup active" when opening the page, the menu is already activated.

<div class="top-menu-popup">
            <div class="top-menu-arrow" style="margin-right: 17.5px;"></div>
            <div class="top-menu-item home" style="display: block;">Homepage</div>
            <div class="context-menu-divider homepage" style="display: none;"></div>
            <div class="top-menu-item contains-submenu">
                "CARS"
                <div class="top-submenu-popup">
                    <div class="top-menu-item volkswagen">Volkswagen</div>
                    <div class="top-menu-item mercedes">Mercedes</div>
                    <div class="top-menu-item ford">Ford Mustang</div>
                    <div class="top-menu-item ferrari">Ferrari</div>
                    <div class="top-menu-item dodge">Dodge</div>
                    <div class="top-menu-item lincoln">Lincoln</div>
                    <div class="top-menu-item jaguar">Jaguar</div>
                </div>
            </div>
        </div>

.top-menu-popup {
    min-width: 178px;
    position: absolute;
    background-color: white;
    -webkit-border-bottom-left-radius: 7px;
    -moz-border-radius-bottomleft: 7px;
    border-bottom-left-radius: 7px;
    border: 2px solid rgba(0, 0, 0, .3);
    border-top: 0;
    border-right: 0;
    -webkit-background-clip: padding-box;
    background-clip: padding-box;
    -webkit-box-sizing: border-box;
    -moz-box-sizing: border-box;
    box-sizing: border-box;
    z-index: 500;
    padding: 5px 0;
    min-height: 40px;
    top: 50px;
    right: 0;
    display: none;
}

.top-menu-popup.active {
    display: block;
}

css

Answer 1

Answer №1

My best guess is that you are referring to the ::active pseudo class:

.top-menu-popup {
    min-width: 178px;
    position: absolute;
    background-color: white;
    -webkit-border-bottom-left-radius: 7px;
    -moz-border-radius-bottomleft: 7px;
    border-bottom-left-radius: 7px;
    border: 2px solid rgba(0, 0, 0, .3);
    border-top: 0;
    border-right: 0;
    -webkit-background-clip: padding-box;
    background-clip: padding-box;
    -webkit-box-sizing: border-box;
    -moz-box-sizing: border-box;
    box-sizing: border-box;
    z-index: 500;
    padding: 5px 0;
    min-height: 40px;
    top: 50px;
    right: 0;
    display: none;
}

html:active .top-menu-popup {
    display: block;
}

Click Anywhere...
<div class="top-menu-popup">
            <div class="top-menu-arrow" style="margin-right: 17.5px;"></div>
            <div class="top-menu-item home" style="display: block;">Homepage</div>
            <div class="context-menu-divider homepage" style="display: none;"></div>
            <div class="top-menu-item contains-submenu">
                "MASINI"
                <div class="top-submenu-popup">
                    <div class="top-menu-item volkswagen">Volkswagen</div>
                    <div class="top-menu-item mercedes">Mercedes</div>
                    <div class="top-menu-item ford">Ford Mustang</div>
                    <div class="top-menu-item ferrari">Ferrari</div>
                    <div class="top-menu-item dodge">Dodge</div>
                    <div class="top-menu-item lincoln">Lincoln</div>
                    <div class="top-menu-item jaguar">Jaguar</div>
                </div>
            </div>
        </div>

Answer 2

My best guess is that you are referring to the ::active pseudo class:

.top-menu-popup {
    min-width: 178px;
    position: absolute;
    background-color: white;
    -webkit-border-bottom-left-radius: 7px;
    -moz-border-radius-bottomleft: 7px;
    border-bottom-left-radius: 7px;
    border: 2px solid rgba(0, 0, 0, .3);
    border-top: 0;
    border-right: 0;
    -webkit-background-clip: padding-box;
    background-clip: padding-box;
    -webkit-box-sizing: border-box;
    -moz-box-sizing: border-box;
    box-sizing: border-box;
    z-index: 500;
    padding: 5px 0;
    min-height: 40px;
    top: 50px;
    right: 0;
    display: none;
}

html:active .top-menu-popup {
    display: block;
}

Click Anywhere...
<div class="top-menu-popup">
            <div class="top-menu-arrow" style="margin-right: 17.5px;"></div>
            <div class="top-menu-item home" style="display: block;">Homepage</div>
            <div class="context-menu-divider homepage" style="display: none;"></div>
            <div class="top-menu-item contains-submenu">
                "MASINI"
                <div class="top-submenu-popup">
                    <div class="top-menu-item volkswagen">Volkswagen</div>
                    <div class="top-menu-item mercedes">Mercedes</div>
                    <div class="top-menu-item ford">Ford Mustang</div>
                    <div class="top-menu-item ferrari">Ferrari</div>
                    <div class="top-menu-item dodge">Dodge</div>
                    <div class="top-menu-item lincoln">Lincoln</div>
                    <div class="top-menu-item jaguar">Jaguar</div>
                </div>
            </div>
        </div>

Answer 3

Answer №2

If you're designing a menu, do you include semantic tags like nav, ul, ol, or li?
Consider trying this example: http://jsfiddle.net/Lpnepzdf/

This code snippet demonstrates how to create a menu structure:

<ul class="horz">
    <li><a href="#">Item 1</a>
        <ul class="vert">
            <li><a href="#">Sub item 11</a></li>
            <li><a href="#">Sub item 12</a></li>
        </ul>
    </li>
    <li><a href="#">Item 2</a>
        <ul class="vert">
            <li><a href="#">Sub item 21</a></li>
            <li><a href="#">Sub item 22</a></li>
        </ul>
    </li>
    <li><a href="#">Item 3</a></li>
    <li><a href="#">Item 4</a></li>
    </ul>

You can style the menu using the following CSS:

ul { margin:0; padding:0 }
.horz > li { display:inline-block; position:relative; padding:0 20px; }
.vert { margin-left:1rem; }
.vert li { line-height:100%; }

ul .vert {
    position: absolute;
    display: none;
    list-style: none;
    width:100%;
}

ul .vert li {
    padding:5px 0;
}

ul > li.active > .vert,
ul > li:hover > .vert {
    display: block; 
}

a:hover { color:red; }

The content will be displayed when hovering over a li element or

div.top-menu-item.contains-submenu

. The menu can also have a permanent submenu by adding the .active class to a specific li.

Answer 4

If you're designing a menu, do you include semantic tags like nav, ul, ol, or li?
Consider trying this example: http://jsfiddle.net/Lpnepzdf/

This code snippet demonstrates how to create a menu structure:

<ul class="horz">
    <li><a href="#">Item 1</a>
        <ul class="vert">
            <li><a href="#">Sub item 11</a></li>
            <li><a href="#">Sub item 12</a></li>
        </ul>
    </li>
    <li><a href="#">Item 2</a>
        <ul class="vert">
            <li><a href="#">Sub item 21</a></li>
            <li><a href="#">Sub item 22</a></li>
        </ul>
    </li>
    <li><a href="#">Item 3</a></li>
    <li><a href="#">Item 4</a></li>
    </ul>

You can style the menu using the following CSS:

ul { margin:0; padding:0 }
.horz > li { display:inline-block; position:relative; padding:0 20px; }
.vert { margin-left:1rem; }
.vert li { line-height:100%; }

ul .vert {
    position: absolute;
    display: none;
    list-style: none;
    width:100%;
}

ul .vert li {
    padding:5px 0;
}

ul > li.active > .vert,
ul > li:hover > .vert {
    display: block; 
}

a:hover { color:red; }

The content will be displayed when hovering over a li element or

div.top-menu-item.contains-submenu

. The menu can also have a permanent submenu by adding the .active class to a specific li.

Issues with the menu pop-up functionality arise when utilizing the CSS class .active

Answer №1

Answer №2

Similar questions

"Adding an Image to Another Image in HTML or JavaScript: A Step-by-Step

How to access the current class in Sass without referencing the parent class

The differences between using the opacity attribute in HTML and the opacity property

Website Navigation: A guide to organizing columns and rows for optimal user experience

What is the best way to remove table cells from a TableBody?

How can I prevent a span in CSS from stretching its parent element?

Problem with Bootstrap container-fluid overlapping with floated element

What is the best way to prevent 2 divs from overlapping on a webpage?

What are the key differences between using role and class selectors in HTML 5 and CSS3 to create two sidebars with three

When the jQuery Div is moved to the right, it gradually shrinks in size, yet remains unchanged when

Ways to modify div content depending on the size of the screen

Issue with the radio button functionality: it can be clicked on but does not change the background

How to add a line break within the :after pseudo-element using CSS

Having trouble with the flexbox flex-direction: column property not functioning properly with the textarea element in Firefox?

Having trouble with Flowbite dropdown functionality in Next.js 12.* with Tailwind CSS

Why is it that aligning items in a row doesn't seem to function properly when I apply a custom class to a container-fluid in Bootstrap 4?

Typewriter Effect: The caret is advancing too quickly

Implementing a Custom CSS Theme in JavaFX

Attempting to replicate the flipping motion of a card by applying the transform property to rotate a div element, ultimately revealing a different

Modify the width measurement from pixels to percentage using JavaScript