How can I position my bottom menu so that it stays above the bottom of the page across different screen sizes?

Question

I am struggling to position my menu so that it always stays in the same position across different dimensions of monitors but is also responsive when the window is decreased and increased in size. I am by all means no expert in CSS and have had no training so I know my code is poor. I am also trying to make the menu ease in gradually but unsure where to enter this code. Any help would very much appreciated.

.HomeBottomMenu {

    -webkit-font-smoothing:antialiased;
    text-align: center;
    text-align: justify;
    position: absolute;
    bottom: -3em;
}
.HomeBottomMenu ul {

    list-style-type: none;
    margin: 0;
    padding: 0
}

.HomeBottomMenu ul li{

    position: relative;
    line-height: 21px;
    min-width: 220px; 
    text-align: center;
    background: #424242;    
}

.HomeBottomMenu ul li a{

    display: block;
    padding: 8px 8px;
    color: #fff;
    text-decoration:none;
    text-align: left;
    font-family: 'BebasNeueRegular',  Arial, sans-serif;
    font-size: 18px;
    font-weight: bold;
}
.HomeBottomMenu ul li a:hover{

    color: #fff;
    background: #25a0da;
    -webkit-transition: all 0.5s ease-in-out;
    -moz-transition: all 0.5s ease-in-out;
    transition: all 0.5s ease-in-out;
}

.HomeBottomMenu ul li ul.dropdown{

    background: #f2f2f2;
    display: none;
    position: absolute;
    z-index: 999;
    left: -0.01em; 

}
.HomeBottomMenu ul li:hover ul.dropdown{

    display: inline;    
    bottom: 100%;
    position: absolute;
    background: #939393;
    min-height: 50px;
}


.HomeBottomMenu ul li ul.dropdowndropdown {

    position: relative;
    overflow:hidden;
    z-index: 100;
    height:0;
    transition-property: height;
    transition-duration: 0.5s;
    transition-timing-function: linear;
    transition-delay: 0.5s;
    Opacity:1;
}

.HomeBottomMenu ul li ul :hover .dropdowndropdown{

    position: relative;
    display:inline;
    bottom:100%;
    height: 200px;
    Opacity:1;
}

.HomeBottomMenu ul li ul.dropdowndropdown li{

    display: block;
    background-color: rgba(0, 90, 235, 0.33);
    bottom: 100%;
}
.HomeBottomMenu ul li ul.dropdowndropdown li:hover{

    position: relative;
}

.HomeBottomMenu ul li ul.dropdowndropdown li a{

    color:#fff;
    font-size:16px;
    padding: 10px 10px;
    text-align:center;
}

.HomeBottomMenu ul li ul .dropdowndropdown li a :hover{

    color: #fff;
}

Answer 1

Got it working with:

 <script type="text/javascript"> $(window).scroll(function() { if ($(this).scrollTop() > 90) { $('.HomeBottomMenu').fadeOut(100); } else { $('.HomeBottomMenu').fadeIn(); } }); </script> 

Many thanks for your help.

by Andy Thomson