Disconnect the parent when the child is clicked in CSS

I am struggling to find a solution for this issue.

Currently, I have a hover effect where when I click on a submenu li item, the parent li also gets highlighted. You can see the behavior in the image below: https://i.sstatic.net/Ie6Lb.png

Is there any way to achieve this using just CSS? While I'm open to a jQuery solution, I'm interested to know if it's possible with CSS alone.

ul li:active > a
 {
    background-color: #2c3e50 !important;
    color: #fff !important;                
    opacity: 1 !important;
}
<ul>
  <li class="solutions-link active" id="solutions-link">
     <a href="#" class="left-side">
         <span>Solutions</span>
      </a>  
      <a href="#" class="arrow-up right-side" aria-hidden="true" data-toggle="collapse" data-target="#hiddenMenuOne">
         <i class="fa fa-chevron-down">
         </i>
        </a> 
     <ul id="hiddenMenuOne" class="collapse first-tree">
              <li>
                <a href="#">Offices</a>
              </li>
              <li>
                <a href="#">Help</a>
              </li>
       </ul>
    <li>
</ul>

jquerycss

Answer №1

The best practice is to transfer the :active style to the a element

ul > li > a:active
 {
    background-color: #2c3e50 !important;
    color: #fff !important;                
    opacity: 1 !important;
}
<ul>
  <li class="solutions-link active" id="solutions-link">
     <a href="#" class="left-side">
         <span>Solutions</span>
      </a>  
      <a href="#" class="arrow-up right-side" aria-hidden="true" data-toggle="collapse" data-target="#hiddenMenuOne">
         <i class="fa fa-chevron-down">
         </i>
        </a> 
     <ul id="hiddenMenuOne" class="collapse first-tree">
              <li>
                <a href="#">Offices</a>
              </li>
              <li>
                <a href="#">Help</a>
              </li>
       </ul>
    <li>
</ul>

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

Resize a responsive grid of images

Within my slider, I have three slides with 3 images each. The layout consists of one large image on the left and two smaller ones on the right. To ensure responsiveness, I've used max-width: 100% on the images so they can scale down proportionally as ...

jquerycssresponsive-design

What is the best way to ensure that my website functions properly on Safari mobile?

I successfully created a website that functions well on my computer across all modern browsers. However, a user reported that it is not working on Safari mobile. Upon testing the website on Safari for Windows, it appeared to display correctly. After view ...

htmlcssmobile-safari

Can you explain the meaning of this AJAX code snippet?

I've been researching online for information, but I'm struggling to find any details about the AJAX code snippet that I'm using: function getEmployeeFilterOptions(){ var opts = []; $checkboxes.each(function(){ if(this.checke ...

javascriptjqueryajax

Utilize various CSS styles for text wrapping

I'm struggling to figure out where to begin with this problem. My goal is to create a three-column row that can wrap below each other if they cannot fit horizontally. The height of the row should adjust to accommodate the items while maintaining a fix ...

javascriptcsshtml

Is there a way to adjust the width of the datepicker on my device?

I've been attempting to adjust the width of the date picker, but I'm having trouble achieving it. Below is my code: import React from "react"; import ReactDOM from "react-dom"; import { DatePicker, RangeDatePicker } from &qu ...

javascriptcssreactjsdatepicker

Determine whether the elements within an array are present on the webpage. If they are, display an alert. If not, reload the page

Initially, I had a userscript designed to search for a specific string within a webpage. If the script failed to locate the string, it would refresh the page after 4 seconds: var item = 'apple'; if(document.body.innerHTML.toString().indexOf(item ...

javascriptjqueryuserscripts

When clicking, populate the content of another div in a vertical top-to-bottom fashion

I am in the process of creating a functionality where clicking on one element will fill another element's content from bottom to top. Although I have managed to make it work on hover, the same functionality is not triggered when clicking on the eleme ...

jquerycss

"How can I adjust the positioning of a Materialize modal to be at the top

I am encountering an issue where the modal is being displayed automatically without any trigger when I try to set the top property in the #singlePost. Despite attempting $('#singlePost').css("top", "1%");, it does not seem to work. I have also ex ...

jquerycssmaterialize

Phonegap Application: Page design gets distorted following keyboard input

After a user enters login details and the next page loads, the layout shifts as shown in the image below. The entire app layout breaks and the view moves down to accommodate the size of the onscreen keyboard. This issue persists unless the orientation is ...

androidcssangularjscordovaphonegap-build

Organize the Div elements in the form of a message

Here is the code I am working with: https://jsfiddle.net/bdqgszv5/1/ This is the same code without jsfiddle: <section id="aussteller" class="row separated"> <div class="section-header text-center"> <h2& ...

htmlcsstwitter-bootstrap

Include a class for CSS styling in EJS using Node.js

Attention: Please be aware of the environment in this Application. The following technologies are being used: Windows NPM, Express MySQL This is the code in an ejs template called example.ejs <% if (message) { %> <p class="al ...

cssnode.jsexpressejs

Combine the content from several URLs listed in an array using either the .get or .ajax method

Is it feasible to add the content of each URL in the array to a given container from a list of URLs using jQuery? For example: <li class="contacts"><a href="index.php#contact1">Contact 1</a> <li class="contacts"><a href="index. ...

jqueryajaxarraysget

The divs contained are misaligned and not properly centered on the page

My container div contains 6 inner divs, but they are not properly centered on the page. Although the divs are equally spaced apart, they seem to be shifted to the left. I tried using 'justify-content: center' without success, and I suspect it mi ...

htmlcss

Shift heading 1 as well as heading 2 to the image's right side

Is it possible to position <h1> and <h2> to the right of an image while ensuring that <h2> is displayed below <h1>? Any suggestions on how I can achieve this layout? This is my current code <html> <link rel="stylesheet" h ...

htmlcss

Ways to integrate a CSS file into XSLT

I have a CSS file that looks like this: .table_class1DeffCell { border-top-width : 1; border-left-width : 1; border-right-width : 1; border-bottom-width : 1; } .table_class11DeffCell { border-bottom-color : 000000; border-top-color : 000000; border-right- ...

javascripthtmlcssxmlxslt

Difficulties encountered when attempting to use a background image for shadow effects within a CSS design

I have been learning from a tutorial on how to create a fixed tabless CSS layout, starting from Photoshop and ending with HTML+CSS code. Here is the final example suggested by the tutorial (how it should look like in the end): And this is my own version ...

htmlcsslayoutxhtml

Trigger filter application upon jqgrid completion of loading

Currently, I am utilizing jqgrid's client-side filter functionality: var opts = { ... loadonce: true, ... } var grid = jQuery("#Grid"); grid.jqGrid(opts) grid.jqGrid('navGrid','#mpager',{edit ...

jqueryjqgrid

Tips for creating a seamless transition between nearly identical images

Recently, I've been experimenting with a series of three images that I placed in an unordered list. These images are extremely similar, with only a small portion changing between each one. This technique creates a captivating 'movie-like' ef ...

jquerytransitioncyclejquery-cycle

Steps for extracting a specific portion of a value contained within an attribute

In my code, there are multiple hyperlinks with different values attached to an onclick function. Here is an example: <a onclick="Utils.decideOffer('', {'unlockFeature': 'cars'});">cars text</a> <a onclick="Util ...

javascriptjqueryregex

What is the best way to add a color swatch image using Javascript?

I'm facing a challenge in Shopify where I need to assign corresponding background images to color swatches. Currently, my icons are set up with the correct links for each color, but they are missing their respective images, similar to this example. I ...

javascripthtmlcssshopify