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.