Adjust the parent's background color upon hovering over a child element

I'm currently working on a menu that looks like this.

<ul>
    <li><a href="#">Home</a></li>
    <li><a href="#">About</a></li>
    <li><a href="#">Services</a>
    <ul>
        <li><a href="">Polish</a></li>
        <li><a href="">Another one</a></li>
        <li><a href="">Another one</a></li>
    </ul>
    </li>
    <li><a href="#">More info</a></li>
    <li><a href="#">Contact</a></li>
</ul>

For the 1st level links, I have set different background colors for hovering. When hovering over "Services," the 2nd level pops up. Then, when hovering over an item from the 2nd level, I want the link from the first level to remain active.

For example, when I hover over Services > Polish, I want the Services' background to stay as if it is hovered over. Is it possible to achieve this effect using only CSS?

htmlcss

Answer №1

Hey there, I've created something completely from scratch and I would love for you to take a look!

Check out the Demo

See Demo 2 (Including background on parent)

.menu > li {
    display: inline-block;
    position: relative;
}

.menu > li > ul {
    display: inline-block;
    position: absolute;
    display: none;
}

.menu > li:hover > ul {
    display: block;
}

.menu > li:hover a {
    color: #f00; 
    /* This selector will color all anchors nested inside li, 
       to be specific, please read the note below */
}

The most important selector here is .menu > li:hover a, as I am targeting the a element that is within the li.

Note: In Demo 1, I forgot to add the > direct descendant selector, so ensure you include it to make your selector more specific. Change .menu > li:hover a to .menu > li:hover > a - View New Demo

Answer №3

Is this what you're looking for?

DEMO

<ul class="menu">
<li><a href="#">Home</a></li>
<li><a href="#">About</a></li>
<li><a href="#">Services</a>
    <ul>
        <li><a href="">Polish</a></li>
        <li><a href="">Another one</a></li>
        <li><a href="">Another one</a></li>
    </ul>
</li>
<li><a href="#">More info</a></li>
<li><a href="#">Contact</a></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

Is there a way in JQuery to display a message when the ul element is empty and hide it when items are added to the list?

In the title lies the question. I find myself with a ul element that lacks list items, and I'm searching for a way to present a message (perhaps a li element) so users can easily see that the list is empty. Once an item gets added to the ul, the messa ...

javascriptjqueryhtmlhtml-lists

What is the best way to target an input element with a specific ID using JQuery Mobile?

For instance, <input type="button" id="one" value="o" data-role="button" data-inline="true" class="game"/> I aim to utilize this button in a manner where I can access its value using the ID, like for updating the value. Is there a way to reference ...

jqueryhtmlbutton

Receiving updates from the website

It is essential to retrieve the initial news item listed on the website at certain intervals. I am working with Python and Selenium for this task. I have experimented with various methods, such as parsing HTML and attempting to interact with JavaScript, ...

javascriptpythonhtmlselenium

What is the best way to transfer data from one function to another file in React without directly calling the component or using props?

filename - Header.jsx import { useEffect, useState } from 'react' import { getValue } from './Input' import TextField from '@mui/material/TextField'; export const Header = () => { const [search, setSearch] = useState( ...

javascripthtmlreactjsreact-props

Encountering an unexplained JSON error while working with JavaScript

I'm trying to retrieve data from a JSON API server using JavaScript AJAX and display it in an HTML table. However, I keep encountering an undefined error with the data displaying like this: Name id undefined undefined This is my code snippe ...

javascripthtmljsonajax

The Bootstrap datetimepicker is malfunctioning, displaying an error in the console stating that '$' is not defined

I'm currently using the bootstrap datetimepicker but it doesn't seem to be working correctly. Can someone please point out what I might be doing wrong? Here are the links that I have provided: <script src="{{ asset ('css/sidebar/p ...

javascriptjqueryhtml

Center and justify image inside flexbox using MUI

Can someone explain why my image appears centered but not justified? I'm feeling confused about this. <Box sx={{ display: 'flex', minHeight: '100vh', alignItems: 'center', flexGrow ...

htmlcssreactjsmaterial-ui

CSS - How can I position one div on top of another without them overlapping each other?

Hi there! I am having trouble positioning the lower div box next to the upper box with details. I tried using absolute positioning, but it keeps going down for some reason (I set the parent div of all three divs as position relative). Can someone help me f ...

htmlcss

Add the AJAX response to a div element when the submit button is pressed

Working on a WordPress project involving an AJAX call, I need to return the result of a row to a div with the ID #hero. The challenge is that since the result is inside a for loop and each row has its own hero div, I want the result to be returned to the c ...

phpjqueryhtmlajaxwordpress

What is the optimal backup plan for selecting rem as the font-size unit in a dynamic layout?

Recently, I started pondering the best fallback option to use when employing rem as the font-size unit. While pixels seem like a suitable choice, it becomes cumbersome to adjust every px-based font-size if you decide to modify the global font-size within a ...

cssfontsresponsive-design

How can I create and utilize a nested array within an ngFor loop?

*ngFor="let arr = ['foo', 'bar', 'sla']; let item of arr; let i = index;" Why does setting the instantiation of arr before let item of arr; result in an exception displaying [object Object]? Why am I unable to structure it th ...

javascripthtmlarraysangulartypescript

Github not recognizing CSS styles

Currently working on a website to showcase the games I've developed, but encountering issues with applying my CSS. The code can be found here. As a novice in HTML and CSS coding, I've tried numerous codes and tutorials without success. ...

htmlcssgithub

What is the best way to access the value of an HTML tag in React?

Currently in the process of developing a feature for the price tab using React. These components are designed to allow users to add price classes to their shopping cart. One challenge I'm facing is how to retrieve the HTML string of an HTML tag. Here& ...

javascripthtmlreactjsdomrefs

Tips for adjusting the height of a fixed-size child element on the screen using only CSS and JavaScript restrictions

I am faced with a challenge involving two child elements of fixed size: <div class="parent"> <div class="static_child"> </div> <div class="static_child"> </div> </div> .parent { border: 1px solid black; dis ...

javascriptandroidhtmlioscss

Style the "focus" pseudo-class of an input element using Vue programmatically

Currently, I have been utilizing event listeners to manipulate the :focus pseudo-class of an input element: const element = document.getElementById("myElementID"); element.addEventListener("focus", (e) => { e.target.style.borderCo ...

cssvue.js

real-time updating of a list in a Jquery and Asp.net web app

In my asp.net application, I have the following code snippet: <div class="divparent" > <div class="child1" ><label> Occupation</label></div> <div class="child2" > <input type="text" name="name" id="Te ...

javascriptjqueryhtmlasp.net.net

Tips for resizing a chartjs within bootstrap columns to accommodate various web browsers

I am using chartjs charts within bootstrap rows and columns. The number of columns per row can be dynamically changed. For example, I could rebuild my rows with the following markup: const twoColumn = spacerColumn + "<div class=&ap ...

cssbrowserchart.jsresize

Incorporating a Bootstrap accordion into an AngularJS webpage

Recently I encountered a problem while attempting to execute the code below in an AngularJS page. <div class='panel-group' id=accordion'> <div class="panel panel-default"> <h4 class="panel-title"> ...

javascripthtmlangularjstwitter-bootstrap

When an image is placed inside a parent div, the link should extend to the entire width of the div, rather than just hovering over

Essentially, I have a div that spans the entire width of its container, inside it is an image link. The image's width is set to adjust automatically with a fixed height of 600px. The link covers the whole width of the div, which in this case is the wi ...

htmlcssimagehyperlink

Background color and page height

When attempting to place a background image on the body element and the page height exceeds that of the viewport, allowing for vertical scrolling. In this case, the background image seems to start or end at the point where the viewport ends when scrollTop ...

css