CODEWITHSUNDEEP
htmlcsscss-selectors
Learning
Learning

Reputation: 20021

Change background color of parent menu only if it has submenu wrapped inside div container

I have a mega menu which show submenus wrapped inside div along with brief text and image. Not all parent menu has sub menu as shown in the example.

On hover i want to change background-color for only those parent menu items which have sub menus.

So in my example only parent one, parent two, parent three and parent four will have background color as background-color:#e5e5e5 for others i don't need background color as they don't have sub menu items.

I tried to change it using pseudo column but i'm unable to target it right may be i am doing something wrong.

some of the CSS which i tried

.nav>li a:hover:has (>div)
    {
       background-color:red !important;
      font-weight:bold !important;
    }
    .nav>li:has(>div)
    {
       background-color:red !important;
      font-weight:bold !important;
    }
    .nav>li:has(> a.active){
       background-color:red !important;
      font-weight:bold !important;
    }

complete fiddle example here

I have already tried few answer which are similar to my qustion on stackoverflow but they dont seem to be working.

I want to do it using pure css solution not jQuery as it is possible with jQuery but i want to avoid jQuery.

Upvotes: 2

Views: 740

Answers (2)

R J
R J

Reputation: 515

<div class="btn-group" role="group" aria-label="Basic example">
  <button type="button" class="btn btn-secondary">one</button>
  <button type="button" class="btn btn-secondary">Two</button>
  <button type="button" class="btn btn-secondary">Three</button>
</div>

check the above code with bootstrap

Upvotes: 0

Michael Benjamin
Michael Benjamin

Reputation: 371749

Here's how to target the parent menus with submenus:

.nav li:nth-child(2):hover > a { background-color: aqua; }
.nav li:nth-child(3):hover > a { background-color: aqua; }
.nav li:nth-child(4):hover > a { background-color: aqua; }
.nav li:nth-child(5):hover > a { background-color: aqua; }

Here's how to target the submenus:

.nav li:nth-child(2):hover .dropdown { background-color: lightgreen; }
.nav li:nth-child(3):hover .dropdown { background-color: yellow; }
.nav li:nth-child(4):hover .dropdown { background-color: lightblue; }
.nav li:nth-child(5):hover .dropdown { background-color: lawngreen; }

DEMO

Upvotes: 1

Related Questions