Determine when mousing over the above element in a nested UL with jQuery

I have an edit menu that appears on the top edge of the selected LI in a potentially deeply nested UL. That edit menu can potentially cover up the text of the previous, adjacent LI, so I'd like to be able to hide the edit menu if you mouse over the previous LI (regardless of which UL the LI falls under). Furthermore, there may be hidden LI's in between the edit menu and the last visible LI before the edit menu, so we only want to deal with the last visible LI.

In my below example, I'd like the .edit-menu div to hide when you hover over li#3.

<ul>
  <li id="1">
     <ul>
        <li id="2"></li>
        <li id="3">HOVER ME</li>
     </ul>
  </li>
  <li id="4" style="display:none;">HIDDEN, SO SKIP THIS ONE</li>
  <li id="5" class="selected">
     <div class="edit-menu">Edit</div>
     SELECTED LI
  </li>        
</ul>

Here is an attempt I made at determining the next one, but it only works if the next LI is either a sibling or immediate child, which is not always the case, so this approach isn't really a viable solution. I've since changed my mind and prefer the edit menu on top, so I'm now trying to determine the above LI rather than the below LI.

$(document).on("mouseover", "li", function(e){          
        var li = $(this).closest('li').attr('id');
        var nextLI = $('li.selected > ul:visible > li:first:visible').attr('id');
        if (!nextLI ){
            var nextLI = $('li.selected').nextAll('li:visible:first').attr('id');
        }
        if(li == nextLI ){
            $('.edit-menu li').fadeOut();
        }
    }).on("mouseout", "span.c", function(e){
        $('.edit-menu  li').fadeIn();
    });