CSS - revealing additional submenu on hover

I'm currently working on customizing a Wordpress menu that includes classic menu items and their respective submenus. The issue I'm facing is that when I hover over an item with children, its submenu will display. However, I want to have a fixed submenu show for the current page. To see my menu in action, you can visit my JSFiddle here. When you hover over "Live show" or "Elvis Presley", you'll notice their respective submenus appear. Elvis Presley is the current page and has the CSS class current-menu-item. I would like to make its submenu visible without requiring a hover, while still allowing Live show's submenu to display on hover. Once you unhover, I'd like the current submenu to reappear.

In my latest attempt using CSS, I added:

.second-navigation ul > li.current-menu-item > ul {
      visibility: visible;
}

This successfully displays the current submenu, but prevents me from seeing Live show's submenu on hover. How can I achieve this? Apologies for any language barriers.

The best way to respond would be through a solution provided in JSFiddle.

htmlwordpresscsshover

Answer №1

To achieve this desired effect, simply include the following code in your CSS:

li.current-menu-item .sub-menu {
    visibility: visible;
    z-index: 100;
}

As a result, when the current menu item contains a submenu, it will be displayed with a visibility of visible and a z-index of 100. The other submenu will have a z-index of 101 to manage its display and hide functionality.

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

What could be the reason behind the disappearance of text from the previously highlighted button in my calculator's "button grid" when I change the highlighted button?

Currently, I am in the midst of creating a tip calculator with a grid consisting of various percentage buttons. My main objective is to change the font and background color when any tip button is selected. Nevertheless, an issue has surfaced - whenever I h ...

javascripthtmlcsscss-grid

Enhancing the appearance of multiple images with CSS and Bootstrap styling

I am struggling to arrange multiple images in my booking system as they are all displaying in a single column rather than the desired layout https://i.sstatic.net/1E8jO.png What I had hoped for was a layout like this https://i.sstatic.net/v8K34.jpg Curre ...

csslaravel-8

Maintain line breaks in the scanner input within an HTML element

Currently, I am utilizing a Zebra DS9908 scanner to scan a barcode and transfer the data onto an HTML page. However, I am encountering an issue with preserving all input characters. Despite attempting both a <div> and <textarea>, the line feed ...

htmlbarcode-scannerzebra-scanners

What is the proper way to modify the wp_posts table in mySQL using a WordPress plugin written in PHP

As I work to enhance a plugin that currently lacks the ability to target specific fields in the wp_posts table for creating or editing entries, I seek guidance on how to achieve this customization within the existing framework. Here are the specifics of my ...

phpmysqlwordpressplugins

Trouble with search box images on Internet Explorer causing confusion

Here is the searchbox image displayed: With this code and css styling: #searchcontainer { margin: 40px 0 0 0; } .search { float: right; margin: 0; padding: 0; height: 21px; width: 310px; } .search input, .search button { mar ...

htmlcss

Ensuring that two operators are not consecutively placed in a Javascript calculator-validation guide

After creating a basic calculator using HTML, CSS, and JavaScript, I encountered an issue. When validating user input, the calculator currently accepts multiple operators in a row. To address this, I attempted to prevent consecutive operators by checking ...

javascripthtml

Providing data in response to a completed form submission

As a beginner, I'm attempting to accomplish the following task: a user selects options from three dropdown menus within a form, and the chosen values are then sent to another file for processing. action="process.php" method="post" In the processing ...

javascriptphphtmlcss

Is your sticky sidebar getting in the way of your footer?

I've developed a custom sticky sidebar for displaying ads, but I'm facing an issue. When I scroll to the bottom of the page, it overlaps with the footer. Can someone please take a look at this? - var stickySidebar = $('.sticky'); if ...

javascriptjqueryhtmlcssjoomla

Encountering issues with loading styles in Vue single file components

While working on my project at this link, I encountered an issue with displaying a styled modal. Despite trying to import the styles using: <style scoped> @import "../styles/modal-style.css"; </style> and even directly pasting the co ...

javascriptcssvue.jsvuejs2vue-component

How can I make multiple elements change color when hovering with CSS?

Hey there! I have a little design challenge that I need help with. On my website (), I am trying to make multiple elements of a specific item change color when the user hovers over the text. If you hover over the "more" menu item, you'll notice that o ...

javascriptjqueryhtmlcsshover

How to style the second child div when hovering over the first child div using makeStyles in Material UI

I am working on a web project with a parent div and two child divs. I need to apply CSS styles to the second child div when hovering over the first child div. Below is the structure of the render method. <div className={classes.parent}> <div c ...

javascriptcssreactjsmaterial-uimakestyles

incorrect sequence of div elements appearing vertically

I'm having trouble organizing the header, page title, and navigation bar on my webpage. Despite my attempts to structure them correctly, they are not displaying in the desired order as shown below: https://i.stack.imgur.com/A3rQe.jpg The issue arises ...

htmlcss

Having difficulty swapping out images on an HTML website template for Internet Explorer

Recently, I obtained an HTML website template that I am currently working on customizing. One of the tasks I have been tackling is replacing some of the existing images with my own. After resizing the new images to match the dimensions of the originals, ...

htmlimagegoogle-chrometemplates

Why are the icon pictures not displaying in Angular's mat-icon-button?

Recently, I stumbled upon a snippet of code in an Angular project that caught my eye. Naturally, I decided to incorporate it into my own program: <div style="text-align:center"> <a mat-icon-button class="btn-google-plus" href="http://google.com ...

htmlangularbuttoniconsangular-material2

Can a pledge be honored at a precise moment?

I have implemented transitions on my web page. When clicked, everything fades out to an opacity of 0 over a duration of 1 second. Then, a new page is swapped in and everything fades back in to an opacity of 1 over another 1-second duration. The issue aris ...

javascriptjquerycsspromise

Add a new string to a class within a Vue.js component

Hey there, currently working on a Vue component where I am iterating through a list of countries. Here's how it looks: <div v-for="i in countries" :key="i.id"> {{i.name}} <span class="flag-icon-gr"></span> I want to dynamically ...

cssvue.jsnuxt.js

Dealing with a routing issue in node.js/express involving JavaScript and CSS

I'm facing an issue. I need to set up a route from localhost.../cars to localhost../bmw/x1 On the localhost../cars page, there's a button that, when clicked, should load localhost../bmw/x1 This is the JavaScript code I have: const express = req ...

javascriptcssnode.jsexpressroutes

Only the Backdrop is triggered by Bootstrap Modal

I've been struggling to figure out why the bootstrap modal is not showing up after hours of troubleshooting. All the files and syntax seem correct, as I have compared them with another working site where the modal functions perfectly. I even disabled ...

javascripthtmltwitter-bootstrap

I successfully developed a unique custom accordion feature in React.js, where the toggle functionality is fully functional. However, I am currently facing an

import React, { useState, useEffect } from "react"; import axios from "axios"; const Faq = () => { const [faq, setFaq] = useState([]); const [activeIndex, setActiveIndex] = useState(null); const fetchFaqs = async () => { ...

htmlreactjsapiaxios

Obtain both the key and value from an Object using Angular 2 or later

I have a unique Object structure that looks like this: myCustomComponent.ts this.customDetails = this.newParameter.details; //the custom object details are: //{0: "uniqueInfo", // 5: "differentInfo"} The information stored in my ...

htmlangulartypescript