In pure CSS or JS (Jquery) change style of a parent but only on hover of one specific sub child

I am using Wordpress and Elementor to build a mega menu.

As you can see on the attached screenshot, I would like to change the header border-bottom-left and right radius to 0 when I hover items on my menu who have sub items.

Below you will find a simplified modeling of the present code (there is a lot more div between each elements as I use a CMS).

<section class="header">
   <div class="logo">...</div>
   <div class="menu">...</div>
      <ul>
         <li class="menu-item">Item 1</li>
         <li class="menu-item">Item 2</li>
         <li class="menu-item">Item 3</li>
         <li class="menu-item has-children">Item 4</li>
            <ul>
                <li>
                    <div>Content of my submenu</div>
                </li>
            </ul>
      <ul>
   <div class="buttons">...</div>
</section>

What I would like is : when I hover the <li> with the class "has-children" to change the style of the parent <section> with the class "header", in order to modify his border radius bottom left and right.

I would love any idea to help me doing it in pure CSS or with a bit of JS.

Thanks by advance !

You want to use the :has() selector so you can determine if one of the grandchildren elements is hovered. Added some basic CSS to get the basic idea down, you just need the section:has() lines

ul ul {
  display: none;
}

section.header {
  background-color: green;
  border-radius: 30px;
  padding: 30px;
}

ul>li.has-children:hover ul {
  display: block;
}


/* what you want to use */

section:has(li.has-children:hover) {
  border-bottom-left-radius: 0px;
  border-bottom-right-radius: 0px;
}

<section class="header">
  <div class="logo">...</div>
  <div class="menu">...</div>
  <ul>
    <li class="menu-item">Item 1</li>
    <li class="menu-item">Item 2</li>
    <li class="menu-item">Item 3</li>
    <li class="menu-item has-children">Item 4
      <ul>
        <li>
          <div>Content of my submenu</div>
        </li>
      </ul>
    </li>
  </ul>
  <div class="buttons">...</div>
</section>