[css] hover блок исчезает при наведении на него

Есть блоки <div> который появляется при наведении на другой элемент через обычный css

.block1:hover .modal{
   display: block;
}

HTML такой:

<div class="block1">
Контент
<div class="modal"></div>
</div>

И такой вопрос, если курсор навести на этот всплывающий блок modal, то он не исчезает. Подскажите, можно ли сделать так, чтобы этот блок исчезал при попытке навести на него.

Выглядит примерно так:

К примеру так реализовано на деливари-клаб при выборе еды в ресторане.