Menu item open on hover


#1

I have written my own calendar widget (in pure React).

I want it to open on hover of the calendar icon in the (top) menu bar and to remain open while the user is clicking on the different days, only closing on blur.

I have managed to do it with the following code

<Menu>
<div className="link item">
   <div className="calendar">
     <Calendar />
   </div>
</div>
</Menu>

div.link.item:hover .calendar {
    display:block;
}

div.calendar {
    display:none;
    position:absolute;
    top:60px;
    z-index:20;
}

This code relies on position:absolute and top:60px which may depend on the content of the menu.

I tried instead to put the calendar in a dropdown for the dropdown to manage the display and position. But I cannot get the dropdown

  • to open on hover (despite an example in the doc)
  • to remain open when dates are clicked and only close on blur