Maintain parent element's hover state when hovering over child element with CSS

I want to make sure that the parent element stays active while hovering over its child element. Here is my code:

<nav class="desktop-menu">
   <ul class="navbar-nav">
    <li><a href="#">About</a></li>
    <li><a title="Business Lines" href="#">Business Lines</a>    
       <ul role="menu" class=" dropdown-menu sub-nav">
         <li><a title="Energy" href="#">Energy</a></li>
       </ul>
    </li>    
   </u>
</nav>

.desktop-menu .navbar-nav>li>a:hover {
    color: #fff;
    background: #67686b;
}
.desktop-menu .dropdown-menu {
    min-width: 220px;
    position: absolute;
    top: 100%;
    border: none;
    background: #67686b;
    color: #fff;
    box-shadow: none;
}
.desktop-menu .dropdown-menu li a:hover {
    color: #FBB914;
}
//Css to ensure parent remains active
.desktop-menu .dropdown-menu:hover .desktop-menu .navbar-nav>li>a{
    color: #fff;
    background: #67686b;
}

Any suggestions on how I can achieve this would be greatly appreciated. Thank you in advance.

csshtml

Answer №1

My recommendation would be to adjust the hover action to target the "li" parent element instead of the "a" tag. This way, you can include the children as well, similar to the following example:

.desktop-menu .navbar-nav>li:hover >a{
    color: #fff;
    background: #67686b;
}
.desktop-menu .dropdown-menu {
    min-width: 220px;
    border: none;
    box-shadow: none;
}
.desktop-menu .dropdown-menu li a:hover {
    color: #FBB914;
}
//Css to keep parent active
.desktop-menu .navbar-nav>li:hover .desktop-menu .navbar-nav>li>a{
    color: #fff;
    background: #67686b;
}
<nav class="desktop-menu">
   <ul class="navbar-nav">
    <li><a href="#">About</a></li>
    <li><a title="Business Lines" href="#">Business Lines</a>
       <ul role="menu" class=" dropdown-menu sub-nav">
         <li><a title="Energy" href="#">Energy</a></li>
       </ul>
    </li>
   </u>
</nav>

Answer №2

Since your .dropdown-menu is nested inside the li element you are hovering over, there is no need for the additional CSS code at the end.

Below is a snippet that should achieve what you're looking for:

.desktop-menu .navbar-nav>li>a:hover {
  color: #fff;
  background: #67686b;
}

.desktop-menu .dropdown-menu {
  display: none; /* Initially hidden */
  min-width: 220px;
  border: none;
  background: #67686b;
  color: #fff;
  box-shadow: none;
}

.desktop-menu li:hover .dropdown-menu {
  display: block; /* Display when parent li is hovered */
}

.desktop-menu .dropdown-menu li a:hover {
  color: #FBB914;
}
<nav class="desktop-menu">
  <ul class="navbar-nav">
    <li><a href="#">About</a></li>
    <li><a title="Business Lines" href="#">Business Lines</a>
      <ul role="menu" class="dropdown-menu sub-nav">
        <li><a title="Energy" href="#">Energy</a></li>
      </ul>
    </li>
  </ul>
</nav>

I hope this clarifies things for you.

Answer №3

If you want to customize your navigation menu with CSS, you can use the following code snippet provided below.

.desktop-menu .navbar-nav>li>a:hover {
    color: #fff;
    background: #67686b;
}
.desktop-menu .dropdown-menu {
    min-width: 220px;
    position: absolute;
    top: 100%;
    border: none;
    background: #67686b;
    color: #fff;
    box-shadow: none;
}
.desktop-menu .dropdown-menu li a:hover {
    color: #FBB914;
}
//Css to keep parent active
.desktop-menu .dropdown-menu:hover .desktop-menu .navbar-nav>li>a{
    color: #fff;
    background: #67686b;
}
.navbar-nav li{
  position: relative;
}
.navbar-nav li ul{
  display:none;
}
.navbar-nav li:hover ul{
  display:block;
}
.navbar-nav li:hover a{
  color:#fff;
  background: #67686b;
}
<nav class="desktop-menu">
   <ul class="navbar-nav">
    <li><a href="#">About</a></li>
    <li><a title="Business Lines" href="#">Business Lines</a>    
       <ul role="menu" class=" dropdown-menu sub-nav">
         <li><a title="Energy" href="#">Energy</a></li>
       </ul>
    </li>    
   </ul>
</nav>

For further reference and practical demonstration, you can visit this link.

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 is the best way to design an HTML page so that it changes its title daily?

I have a goal to change the site's title every day, but I am not an experienced programmer. I know that this can be done using JavaScript. I came across this idea: setInterval(function() { //change title //document.title = "Some new title"; ...

javascripthtml

Rearranging the layout of the image in bootstrap

Greetings, I have a question that may seem amateurish, but I am facing some difficulties. Below is the CSS code I am using: body{ background-image: url(street-photography1.jpg); background-size: cover; color: white; background-repeat: no-repeat; backgr ...

htmlcsstwitter-bootstrap

Tips for distinguishing and organizing related rows from each other

I have a table in my database that I need help with. It contains various transactions between different teams along with specific details and timestamps. Number Text DateTime 31156 From Team A to Team B : Player X0 11.01.2021 21:07:56 31155 From ...

phphtmlsqlrows

Comparing Jquery's smoothscroll feature with dynamic height implementation

Recently I launched my own website and incorporated a smoothscroll script. While everything seems to be working smoothly, I encountered an issue when trying to adjust the height of the header upon clicking on a menu item. My dilemma is as follows: It appe ...

javascriptjqueryhtmlscrollsmoothing

Using the CSS overflow scroll property with Bootstrap

I am attempting to resize Section A in Column 1 to match the height of the row. 1 row, 2 columns: +---------------------+---------------------+ | Column 1 | Column 2 | | | | | +--------------- ...

cssbootstrap-4

Is Intellisense within HTML not available in SvelteKit when using TypeScript?

Having trouble with intellisense inside HTML for a simple page component. Also, renaming properties breaks the code instead of updating references. Typescript version: 4.8.4 Below is the code snippet: <script lang="ts"> import type { Bl ...

htmltypescriptjsxsveltesveltekit

Having trouble getting the CSS 3 Spin feature to work?

Using webkit for previewing in chrome. The spinning circles I created are not working properly (definitely not an HTML issue.) #loader-wrapper { position: fixed; top: 0; left: 0; width: 100%; height: 100%; z-index: 1000; } #loader { display: inline-bl ...

cssanimation

To determine the class of an element and reveal its parent if the class is present

Typically, the parent element remains hidden by default. However, upon clicking a specific element, its child might gain a class called "selected". How can I check for this class and then display the entire list if it is present? <ul style="display: ...

jquerycss

Padding for the initial element in a carousel display

I am currently working on implementing owl carousel with stage padding. My goal is to use the carousel with loop:false, and have the first item displayed without left padding, while maintaining consistent padding for both items on the left and right after ...

javascriptjqueryhtmlcss

The functionality of Javascript seems to be disabled following the integration of Bootstrap

Hi Everyone I've encountered an issue with my JavaScript. Ever since I incorporated Bootstrap, it seems to have stopped working. Even basic functions like an alert with an onclick event are not functioning anymore. Below is the code snippet: Incorp ...

javascripthtmlbootstrap-4

Creating CSS queries for Selenium automation testing

css=table#playlistTable tr:nth(0) span[class='playlistNumDisplay smallFont'] I'm encountering an issue with the CSS code above. My intention is to target the first 'tr' element under 'PlaylistTable' and then select the & ...

cssseleniumcss-selectorsselenium-rc

Toggle between images in Vue.js when an image is clicked

Hey there, I'm pretty new to Vue and could use some assistance with implementing a certain logic. I have a JSON file that contains information about polaroids I've taken, such as their IDs, names, image names, and descriptions. Here's a sni ...

javascripthtmlcssvue.js

jQuery and conditional statement are failing to replace null value

I am encountering an issue where some of the data objects I am fetching do not contain any data, resulting in "- null" being displayed instead of empty data (which is the expected behavior). Despite implementing a conditional if statement if (results == n ...

javascripthtmljquerynull

Incorporating Twitter Bootstrap into your Zend Framework 2 Navigation Menu

I have successfully created a menu from my database and the code is functioning perfectly. Now, I'm looking to enhance the menu's style by incorporating Twitter Bootstrap, but I'm encountering some difficulties in doing so. Is there anyone k ...

csstwitter-bootstrapzend-framework2

Having trouble accessing a JavaScript variable in Javascript due to reading null property 'value'

What I Require I am in need of passing a URL variable from an HTML document to a JavaScript file. HTML Snippet <script> var urlParam = "{{ page_param.asy_request | replace('&','&')}}"; urlParam = urlParam.rep ...

javascripthtml

Discovering whether input field is currently in focus using jQuery

Does anyone know how to determine if an input tag in HTML has focus using jQuery? The keydown event will function for forms when input, image, etc. tags have focus. However, it will not work if the focus is on the form itself but not on any specific tags ...

javascriptjqueryhtml

When I hover over one div, I aim to alter the background color of another div, but unfortunately, the change

Is there a way to change the color of #bg when hovering over any div element with an id of symbol in a container? <div id="container"> <div id="symbol1"></div> <div id="symbol2"></div> ...

htmlcss

Tips on displaying a div element using jQuery

What is required: I simply need to display a div. Code snippet: <a href="javascript:void(0);" id="viewdetail" onclick="$(this).show();" style="color:green">View Detail <div class="speakers dis-non"> </div> </a> After ...

javascriptjqueryhtmlcss

What steps can I take to prevent a JavaScript element from clearing everything when clicked?

After clicking on "add more," the first delete function works correctly, but the subsequent delete element deletes everything on the page. I suspect there may be an issue with the 'ele' variable in the JavaScript code. Since I am not very experie ...

javascripthtmljquery

The Ajax post is only activated on one occasion

Hello there, I am encountering a problem with an ajax function. My goal is to post data to a database and then update a table that displays the database information. Strangely, the process works fine the first time - data is posted and the table is refresh ...

javascriptphphtmljqueryajax