CSS: Ancestor menu disappears when sub menu is hovered over

The webpage in question has an interesting interactive feature:

Upon hovering over the "About Us" menu item, the background transitions to black with white text. Subsequently, when moving onto the sub-menu item "Meet our team", the original content under "About Us" disappears.

It seems like this behavior could be related to the header links or possibly their ancestor elements.

Below is the custom CSS that I have implemented:

#header .menu > li.current_page_item > a {
background-color: #2A60A2;
color: #ffffff;
}

#header .sub-menu > li.current_page_item {
background-color: #2A60A2;
}

#header .menu > li.current-menu-ancestor > a {
background-color: #2A60A2;
color: #fff;
}

#header .menu > li > a:hover {
background-color: #000; 
color: #fff;
}

#header .sub-menu li:hover {
background-color: #2A60A2;
}

Answer №1

Modify the code from

#header .menu > li > a:hover
to
#header .menu > li:hover > a

Answer №2

Eliminate the following line from custom.css

Your customized CSS code

 #header .menu > li.menu-hover > a,
 #header .menu > li.current_page_item > a,
 #header .menu > li.current-menu-ancestor > a,
 #header .menu > li > a:hover {
        color: #fff;
}

Modify it to

 #header .menu > li.current_page_item > a,
 #header .menu > li.current-menu-ancestor > a,
 #header .menu > li > a:hover {
        color: #fff;
}

Get rid of this

#header .menu > li.menu-hover > a,

Answer №3

For the necessary adjustments to this css code, please refer to custom.css line 62.

    #header .menu > li.menu-hover > a, #header .menu > li.current_page_item > a, #header .menu > li.current-menu-ancestor > a, #header .menu > li > a:hover {
        color: #777;
    }

Answer №4

  #header .header-links li.menu-parent.menu-hover {
  background: white;
  color: #000;
}

Include the following code snippet in your stylesheet

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

I'm experiencing some unusual behavior with the Windows media app when using HTML and CSS

I have a Windows Media Player box on my page, but it overlaps every piece of HTML code. How can I get it to move to the back so that I can still use it? Another problem is that everyone who visits my page needs a plugin to load it, even though most people ...

Steps for Converting Unicode Characters to HTML Encoding in C++

Can you assist me with converting unicode characters like the ones below in C++? Thére Àre sôme spëcial charâcters ïn thìs têxt عربى I need to convert them to HTML encoding as shown below: Thére Àre sôme sp&am ...

An issue arises when trying to loop using a while loop within an HTML structure

I have a small project with a predefined format, where I need to select a value from a dropdown menu and use that value to fetch data from a database and display it in HTML. While I am able to retrieve the data from the database based on the selected value ...

What is the best way to make a table fill 100% of the available height

Is this a Repetitive Question? How to stretch an HTML table to 100% of the browser window height? Just like the title says, I am looking for a way to make my table element stretch to 100% height even when the content does not entirely fill the page&ap ...

issues with re-invoking the button following dynamic addition/removal in Angular 2+

A textbox with add (+) and delete (-) buttons attached horizontally has been created. The first button lacks a delete section. Its image is - https://i.sstatic.net/lwco5.png Due to coding dependency, the add (+) button disappears after the first addition. ...

Open the URL in a new tab based on certain conditions

Currently, my page redirects if a specific checkbox is selected and the "submit" button is clicked: if request.Form("myCheckbox") = "on" then response.Redirect("/newPage.asp?txt="staff"") else response.Redirect("/thisPage.asp") end if I ...

SVG fill with no color

Currently, I am attempting to utilize a wave SVG while also having a background image set for the body of the webpage. However, I am encountering an issue where I want the SVG to be filled with transparency so that the body background image shows through. ...

What is the method for placing text underneath your background image?

click here for image I am trying to set a full viewport background image by applying it to the body tag. Currently, I have successfully achieved this with the following CSS code: body { background-image: url(/picture.jpg); } However, I also want to displ ...

Concealing anchor and span elements using CSS in Internet Explorer 7

I decided to simplify things by creating a style within the document to address my specific issue. The problem I encountered involves a row of 4 links that are designed to resemble buttons. I have chosen to hide the Next link (the 3rd item) using CSS. Whil ...

What is the best way to relocate the box within this HTML/CSS document?

Looking at this specific HTML webpage <html> <head> <title>CSS Structure</title> <link href="layout.css" rel="stylesheet" type="text/css" /> </head> <body> <div id="header">Header 900x100 px</div> ...

The contact form is not functioning properly, as it is not sending emails and

Having some trouble with my contact form on the website. All the form fields are validating properly but for some reason, the email is not being sent and the page reloads. Can someone review my code and help me identify where the issue might be? I want the ...

Style condition within an HTML element

Can you apply conditional styling within the <head> tag as demonstrated in the following example? <body> <div id="InScreenAlertContainer" <!--[if IE]> <style>width=100%</style> <![endif]--> > ...

Utilizing "beneath the scroll" on a bootstrap 5.1 webpage

I have a website built with Bootstrap and I am looking to implement a "below the flow" positioning for the footer, preferably using CSS. I have been referring to it as "below the fold," although I'm not sure if that is the correct terminology to use. ...

Any tips on how to effectively integrate dynamic theming in CSS?

I am currently developing a theming feature for my web application, allowing users to select a theme that will dynamically change the color of various elements. Here is an example of the theme selector: <div id="theme-selector"> <div id="theme- ...

Fixed css footer with full height content container

For my website's sticky footer, I followed this technique: I wanted to add a border around the entire site that also encompasses the footer, but ran into an issue where it did not extend around the page properly. Here is what happened: https://i.ssta ...

Can you include text within the border of a table?

Currently tackling my homework assignment which involves creating a virtual chessboard. Progress has been smooth thus far, as I've managed to write the code for it: I am now looking to incorporate Letters (A-H) and Numbers (1-8) around the board, rep ...

Expand child elements within the parent container to fill the entire width of the browser

Does anyone know how to make a nested child element the full width of the browser? I've tried using position absolute and setting left and right to 0, but it's not working as expected. You can see what I'm trying to do in this fiddle: http: ...

X-Ray Rendering in Three.js and Webgl

Looking to create an x-ray effect in three.js / webgl. Something like this: UPDATE I am seeking help on how to achieve a real-time render with the x-ray effect, instead of just a static image. This can be accomplished using shaders that modify density i ...

Is it possible to deactivate an anchor tag based on the result of a conditional statement that returns a string?

I've created an anchor tag (not a button) with text that redirects me to another page <StyledTableCell align="center"> <Link href={`/races/results/${race.id}`}>{race.race_name}</Link> </StyledTableCell> There is a ...

Ways to align content in the middle vertically with Bootstrap v5.2

I am attempting to recreate the vertical centering layout of this website for my own site, but I am struggling to keep my content centered in the viewport. Expected outcome: https://i.sstatic.net/0yCyg.png My code: https://i.sstatic.net/1omTV.png The ...