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

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

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.

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

Overlapping Image Arrows with CSS Styling

After receiving a design with what appeared to be a simple feature from a designer, I discovered that implementing it was more complex than expected. Specifically, I needed to create a CSS3 arrow with an image as the fill color in order to overlap the unde ...

jqueryhtmlcssslider

Tips for incorporating Material.io outlined icons within css pseudoelements (::before) usage

I'm attempting to incorporate the Material.io icon into a button using ::before, but it is appearing filled rather than outlined. Unfortunately, there are no available instructions on how to display the icon in an outlined style. This is the code I ...

cssiconsmaterial-designmaterial-ui

Updates made to the Transform property in Mui Theme are not appearing in the browser

I'm looking to modify the MuiInputLabel.outlined. While I can see various changes when inspecting in the browser, I'm having trouble seeing the transform property change specifically. This is the current configuration of my MuiInputLabel: MuiInp ...

cssreactjsmaterial-ui

Experiencing difficulties with JavaScript/jQuery when encountering the 'use strict' error

I have been working on a small function to change the background of an HTML file, but I keep getting the 'Missing 'use strict' statement' error message from JSLint despite trying multiple solutions. Can anyone suggest how to resolve th ...

javascriptjqueryhtmlcss

What is the process for setting up both an open and closed status for my accordion?

After browsing through multiple threads on accordions, none seem to match my current structure which I believed was effective. In an attempt to learn and build elements from scratch, I created the following accordion with some help from Google and experi ...

javascriptjquerycss

Adding a bootstrap label on the corner of a div using overlay technique

I'm attempting to superimpose a bootstrap label in the corner of a DIV. My goal is to position the label in the top left corner of the div, partially overlapping it. Thank you <div class="span4" style="border-bottom: none; border-top: 4px s ...

htmlcsstwitter-bootstrap

Three divs are positioned within the parent element and collectively fill the entire height. The first and last div have varying

I attempted to replicate the design shown in the image below: Initially, I was successful in achieving this using JavaScript. However, when attempting to recreate the same effect using only CSS without any JavaScript, I encountered difficulties and failed ...

csspositionheight

jQuery navigation is experiencing issues due to conflicting buttons

I am currently developing a web application that features two buttons in the header: Share and Options. When a button is clicked, its related content expands and collapses when clicked again. The issue arises when the user clicks on the share button and th ...

jqueryhtmlcss

Learn how to create a stunning effect by combining two half images and revealing a full image upon hover with a smooth animation

I am struggling with implementing a specific feature using jQuery. I have designed a page hero with two sections (red and black): My goal is to have the black section expand over the red section when hovering, creating a full black box. I want the same ef ...

javascriptjqueryhtmlcss

Clever method for enabling image uploads upon image selection without needing to click an upload button using JQuery

Is there a way to automatically upload the file without having to click the upload button? Detail : The code below shows an input field for uploading an image, where you have to select the file and then click the "Upload" button to actually upload it: & ...

javascriptphpjqueryhtmlcss

What is the best way to make background SVGs tile seamlessly within the cells of a table?

I am currently dealing with a series of table cells that are filled with various colors and styles. The issue I'm facing is getting the styles to tile properly, as they are not seamlessly continuing from one cell to the next even if they share the sam ...

htmlcsssvg

It is not possible to decrease the size of the image that is currently used as the background image

Three images are arranged in this manner: https://i.stack.imgur.com/u4PdK.png The HTML code for this setup is as follows: <div class="lb-controlContainer"> <div class="lb-closeContainer"> <a class="lb-close"&g ...

css

Bootstrap sticky footer with adjustable height

Striving to achieve a sticky footer with a custom height on my website has turned out to be more challenging than I initially expected. Presented below is a snapshot of the current state of my footer: The issue arises where my contact form is concealed b ...

htmlcsstwitter-bootstrapfootersticky

Customizing the appearance of all Angular components with styles.scss

Is there a way to create a universal style in styles.scss that can be applied to all Component selectors (e.g. app-componentA, app-componentB ...)? I understand that I could manually add the style to each selector, but I am concerned that it may be forgot ...

cssangular

The white-spaces in Quill JS do not retain their original formatting

I recently integrated Quill JS editor into my website. During testing, I noticed that any text inputted after a white space gets emitted when alerting the content. Below is the HTML code snippet: <div id="postCommentEditor" class="postCo ...

javascripthtmlcssquill

Content will be displayed below the background image

Help Needed: Content Going Over Background Image Hey there! I'm having a bit of trouble with my home page design. I have a full-width background image, but the content isn't displaying below it like I want it to. Instead, it's showing over ...

htmlcssflexbox

Insert a gap between the two columns to create some breathing room

Does anyone know how to create spacing between columns in an HTML table without affecting the rows? In my table, each column has a border around it: <table> <tr> <td style="padding:0 15px 0 15px;">hello</td> <td style=" ...

htmlcsshtml-table

Can divs be arranged in a similar fashion as images?

My goal is to create a navigation bar (#nav) with each nav item being a div (#nav div). However, my current approach isn't working as expected. Here is the code I'm using: #nav { background: url("navbg.png"); /* navbg.png is 1x40 pixels */ ...

htmlcss

The transitionend event fails to trigger if there is no active transition taking place

Take a look at this: http://jsfiddle.net/jqs4yy0p/ JS $('div').addClass('switch').on('transitionend', function(e){ alert('end'); }); CSS div { background-color: red; /*transition: background-colo ...

javascriptcsscss-transitions

Press the "show additional content" button on the nytimes.com website using selenium

I'm experiencing difficulty scrolling through this webpage. Once I reach the bottom of the page, I am unable to locate and click on the "SHOW MORE" button using selenium. self.driver.execute_script("window.scrollTo(0, document.body.scrollHeight);") ...

pythoncssseleniumselenium-webdriverweb-scraping