Simi-static Menu with JQuery

gistfile1.html

<ul class="shown">
    <li>A</li>
    <li>B</li>
    <li>C</li>
    <li>D</li>
</ul>
<ul class="hidden">
    <li class="more">...</li>
</ul>
</html>

gistfile2.css

li {

    position:relative;
    font-size:30px;
    width:30px;
    padding:35px;
    background-color:#dddddd;
    margin:5px;
    
}

ul.hidden li {

    float:left;
    cursor:pointer;

}

gistfile3.js

$('.hidden').hover(function(){

    $(this).children(':not(.more)').show()

}, function(){

    $(this).children(':not(.more)').hide()

})

$(window).resize(function(){

    var newHeight = $(window).height()
    var listHeight = $('ul.shown').height()
    var hiddenList = $('ul.hidden')
    var shownList = $('ul.shown')
        
    if(newHeight < (listHeight+100)){
    
       var elementToHide = $('ul.shown li').last()
       hiddenList.append(elementToHide)
       elementToHide.hide()
        
    }else if(newHeight >= (listHeight+200)){
        
        var elementToShow = $('ul.hidden li:not(.more)').first()
        shownList.append(elementToShow)
        elementToShow.show()
        
    }
        
})