Hi I’m making menu in footer

This is my code

CSS:

<style>
    footer {
        width: 100%;
        position: fixed;
        bottom: 0px;
    }
 
        footer ul li {
            float: left;
            list-style: none;
            background: none repeat scroll 0 0 #cfcfcf;
            width: 16.66%;
            text-align: center;
            padding: 8px 0;
            border: 1px solid #bbb;
        }
 
            footer ul li:hover {
                background: none repeat scroll 0 0 #f90;
            }
 
    #first,#second,#third,#fourth,#fifth,#six {
        position: absolute;
        background: none repeat scroll 0 0 #cfcfcf;
        width: 100%;
        min-height: 320px;
        left: 0;
        bottom: -300px;
        display:none;
    }
</style>

HTML:

<div id="first">
    <h2>News</h2>
</div>
<div id="second">
    <h2>Media</h2>
</div>
<div id="third">
    <h2>Watch</h2>
</div>
<div id="fourth">
    <h2>Connect</h2>
</div>
<div id="fifth">
    <h2>Newsletter</h2>
</div>
<div id="six">
    <h2>Subscribe</h2>
</div>
<footer>
    <ul class="list-unstyled list-inline">
        <li id="news">News Update</li>
        <li id="media">Media Coverage</li>
        <li id="watch">Watch Live</li>
        <li id="connect">Connect With me</li>
        <li id="gallery">Newsletter Gallery</li>
        <li id="subscribe">Subscribe to Newsletter</li>
    </ul>
</footer>

JQuery:

<script>
    $(document).ready(function () {
        $("#news").hover(function () {
            $("#first").css('bottom', '0' );
            $("#first").css("display","block");
        }, function () {
            $("#first"). css('bottom', '-300px' );
            $("#first").css("display", "none");
        });
        $("#media").hover(function () {
            $("#second"). css('bottom', '0' );
            $("#second").css("display", "block");
        }, function () {
            $("#second"). css('bottom', '-300px' );
            $("#second").css("display", "none");
        });
        $("#watch").hover(function () {
            $("#third"). css('bottom', '0' );
            $("#third").css("display", "block");
        }, function () {
            $("#third"). css('bottom', '-300px' );
            $("#third").css("display", "none");
        });
        $("#connect").hover(function () {
            $("#fourth"). css('bottom', '0' );
            $("#fourth").css("display", "block");
        }, function () {
            $("#fourth"). css('bottom', '-300px' );
            $("#fourth").css("display", "none");
        });
        $("#gallery").hover(function () {
            $("#fifth"). css('bottom', '0' );
            $("#fifth").css("display", "block");
        }, function () {
            $("#fifth"). css('bottom', '-300px' );
            $("#fifth").css("display", "none");
        });
        $("#subscribe").hover(function () {
            $("#six"). css('bottom', '0' );
            $("#six").css("display", "block");
        }, function () {
            $("#six"). css('bottom', '-300px' );
            $("#six").css("display", "none");
        });
    });
</script>