The behavior you are implementing is more of a CSS thing.
.popupButton>ul {
display: none;
}
.popupButton:hover>ul {
display: block;
position: absolute;
/* Addition styles */
}
However, if you want to do it JS, just target the mouseenter en mouseleave events on the containing parent of the popup (so the parent is hovered when the popup is hovered per definition).
<div class="popupButton">
Open it up!
<ul><li><a href="#">My Link</a></li></ul>
</div>