Below is my attempt at creating a dropdown menu that stays visible while hovering on the parent Hover Me div.

The desired outcome of this is for the child div to stay visible when I move my mouse from the parent to the child. However, it disappears as I move my mouse towards the child.

The reason for this is the margins between the initial parent to the child unfocus the hover from the parent.

My question is: How do I make my child visible while I move my mouse from the parent to the child without changing the margin between them?

<div >
    <div >Hover Me</div>
    <div >
      Lorem ipsum dolor sit amet, consectetur adipiscing elit. Vestibulum
      egestas ligula vel turpis imperdiet, eu volutpat turpis pharetra.
      Fusce in turpis mauris. Nunc quam nibh, tempor a arcu eu, imperdiet
      vulputate odio. Integer vel nisi in odio ultrices interdum luctus non
      dolor.
    </div>
  </div>

.hover-me {
    width: fit-content;

    background-color: aqua;

    padding: 5px;
    border-radius: 5px;
  }

.dropdown {
    display: inline-block;
    position: relative;
}

.dropdown-content {
    display: none;
    position: absolute;

    width: 250px;
    /*   Keep the same distance from the hover me div   */
    top: 40px;

    background-color: aqua;
    color: #000;

    border-radius: 5px;
    padding: 5px;
}

.dropdown:hover .dropdown-content {
    display: block;
}

UPDATED: JsFiddle -> https://jsfiddle.net/1x3zbrne/1

CodePudding user response：

You should change your position from absolute to relative

.dropdown-content {
    position: relative;
}

Position absolute isn't placed in the parent, so it's treated like completely different box (parent div is used only for positioning). Position relative sets position according to the basic position of the div.

Edit: A lazy solution would look like this:

.hover-me {
  margin-bottom:50px;
}

You should keep the position:absolute in the dropdown-content. The margin on the bottom of hover-me acts as a filler between the hover button and your dropdown-content. If you have something below the dropdown div and don't want the empty space between them you can add margin-top:-50px to the div below.