<a> element is hovered

Question

Easy to explain. I want to make something like dropdown menu. When I hover on element (for example ) - appears div block, which disappears on leaving <a> element or div block.

<a>Element to hover</a>
<div>I'm not gonna disappear until u leave me or my <a> bro</div>

I hope it would be easy for you guys to help me. Thanks in advance!

What have I tried? I went by the simplest way, but this doesn't work as I wanted. I did it in css, smth like

 a:hover div {
display: block;
} 

But when I leave div, it disappears. So I need the other solution? How can I do this?

Answer 1

这是一个简单的CSS解决方案使用兄弟选择器的样子。

＆＃13;

＆＃13;

.nav
{
  border: 1px solid black;
  padding: 1px;
}

.nav:hover + .menu, .menu:hover
{
  display: block;
}

.menu {
  display:none;
  border: 1px solid black;
  padding: 1px;
}

＆＃13;

<a class="nav">Element to hover</a>
<div class="menu">I'm not gonna disappear until u leave me or my a bro</div>

＆＃13;

＆＃13;

＆＃13;