Show div on hover of direct parent only

Question

I am trying to make a div appear when you only hover its direct parent div. Right now the div will show when you hover any div of that type. See this simple example of the problem.

How can I make a .menu div only show when the mouse hovers directly over that div (and not it's child divs)?

.widget {
  width: 150px;
  height: 150px;
  background-color: #ddd;
  position: relative;
}
.menu {
  background-color: #444;
  display: flex;
  position: absolute;
  top: 0;
  display: none;
}
.widget:hover > .menu {
  display: flex;
}

<div class="widget" style="width: 500px; height: 500px; background-color: #eee;">
  <div class="menu">
    <p>I should ONLY be visible when you hover the big outer widget and NOT when you are hovering the small inner widget</p>
  </div>
  <div class="widget" style="left: 200px; top: 200px;">
    <div class="menu">
      <p>I should ONLY be visible when you hover the small inner widget</p>
    </div>

  </div>
</div>

Answer 1

If you can't change the markup, there is no way you can target the first menu item and hide it when the child .widget is hovered. You will need to use JS.

I you cant use JS, you will need to change your makup, there are two ways you can achieve your aim:

Put the first .menu after the child .widget so you can target it with the .widget:hover > .widget:hover + .menu selector when the child widget is hovered :

.widget {
  width: 500px;
  height: 500px;
  position: relative;
  background-color: #eee;
}
.widget > .widget{
  left: 200px;
  top: 200px;
  width: 150px;
  height: 150px;
  background-color: #ddd;
}
.menu {
  background-color: #444;
  display: flex;
  position: absolute;
  top: 0;
  display: none;
}
.widget:hover > .menu {
  display: flex;
}
.widget:hover > .widget:hover + .menu {
  display: none;
}

<div class="widget">
  <div class="widget">
    <div class="menu"><p>I should ONLY be visible when you hover the small inner widget</p></div>
  </div>
  <div class="menu"><p>I should ONLY be visible when you hover the big outer widget and NOT when you are hovering the small inner widget</p></div>
</div>

A second approach would be to make the child .widget a sibling of the first:

.wrap {
  position: relative;
  width: 500px;
  height: 500px;
}
.widget {
  position: absolute;
  background-color: #ddd;
}
.w1 {
  width: 500px;
  height: 500px;
  background-color: #eee;
}
.w2 {
  left: 200px;
  top: 200px;
  width: 150px;
  height: 150px;
}
.menu {
  background-color: #444;
  display: flex;
  position: absolute;
  top: 0;
  display: none;
}
.widget:hover > .menu {
  display: flex;
}
.widget:hover > .widget:hover + .menu {
  display: none;
}

<div class="wrap">
  <div class="widget w1">
    <div class="menu"><p>I should ONLY be visible when you hover the big outer widget and NOT when you are hovering the small inner widget</p></div>
  </div>
  <div class="widget w2">
    <div class="menu"><p>I should ONLY be visible when you hover the small inner widget</p></div>
  </div>
</div>

On a side note, you should try not to use inline CSS.