keep website menu on screen when scrolling

Question

I am trying to make it so my drop down menu will stay on the top of the screen (so no matter how far you scroll down the site menu is always at the top) when scrolling down on my website. This is the css and menu I am using for my website. Can someone PLEASE help me I have tried for days to accomplish this with no success.

<style>
    #cssmenu ul,
    #cssmenu li,
    #cssmenu span,
    #cssmenu a {
        margin: 0;
        padding: 0;
        position: relative;
    }
    #cssmenu: after, #cssmenu ul: after {
        content: '';
        display: block;
        clear: both;
    }
    #cssmenu a {
        color: #FF0000;
        display: inline-block;
        font-family: 'Lucida Grande', 'Lucida Sans Unicode', Helvetica, Arial, Verdana, sans-serif;
        font-size: 12px;
        min-width: 35px;
        text-align: center;
        text-decoration: none;
        text-shadow: 0 -1px 0 #000;
    }
    #cssmenu ul {
        list-style: none;
    }
    #cssmenu > ul > li {
        float: left;
    }
    #cssmenu > ul > li.active a {
        background: #000 url(grad_dark.png) repeat-x left bottom;
        background: -moz-linear-gradient(top, #000 0%, #000 100%);
        background: -webkit-gradient(linear, left top, left bottom, color-stop(0%, #000), color-stop(100%, #000));
        background: -webkit-linear-gradient(top, #000 0%, #000 100%);
        background: -o-linear-gradient(top, #000 0%, #000 100%);
        background: -ms-linear-gradient(top, #000 0%, #000 100%);
        background: linear-gradient(to bottom, #000 0%, #000 100%);
        filter: progid: dximagetransform.microsoft.gradient(startColorstr='#000', endColorstr='#000', GradientType=0);
        box-shadow: inset 0 0 10px #000, inset 0 10px 10px #000;
        -moz-box-shadow: inset 0 0 10px #000, inset 0 10px 10px #000;
        -webkit-box-shadow: inset 0 0 10px #000, inset 0 10px 10px #000;
        filter: none;
    }
    #cssmenu > ul > li.active a: hover {
        background: -moz-linear-gradient(top, #000 0%, #000 100%);
        background: -webkit-gradient(linear, left top, left bottom, color-stop(0%, #000), color-stop(100%, #000));
        background: -webkit-linear-gradient(top, #000 0%, #000 100%);
        background: -o-linear-gradient(top, #000 0%, #000 100%);
        background: -ms-linear-gradient(top, #000 0%, #000 100%);
        background: linear-gradient(to bottom, #000 0%, #000 100%);
        filter: progid: dximagetransform.microsoft.gradient(startColorstr='#000', endColorstr='#000', GradientType=0);
        filter: none;
    }
    #cssmenu > ul > li a {
        box-shadow: inset 0 0 0 1px #000;
        -moz-box-shadow: inset 0 0 0 1px #000;
        -webkit-box-shadow: inset 0 0 0 1px #000;
        background: #000 url(grad_dark.png) repeat-x left top;
        background: -moz-linear-gradient(top, #000 0%, #000 50%, #000 51%, #000 100%);
        background: -webkit-gradient(linear, left top, left bottom, color-stop(0%, #000), color-stop(50%, #000), color-stop(51%, #000), color-stop(100%, #000));
        background: -webkit-linear-gradient(top, #000 0%, #000 50%, #000 51%, #000 100%);
        background: -o-linear-gradient(top, #000 0%, #000 50%, #000 51%, #000 100%);
        background: -ms-linear-gradient(top, #000 0%, #000 50%, #000 51%, #000 100%);
        background: linear-gradient(to bottom, #000 0%, #000 50%, #000 51%, #000 100%);
        filter: progid: dximagetransform.microsoft.gradient(startColorstr='#000', endColorstr='#000', GradientType=0);
        border-bottom: 1px solid #000;
        border-top: 1px solid #000;
        border-right: 1px solid #000;
        line-height: 34px;
        padding: 0 35px;
        filter: none;
    }
    #cssmenu > ul > li a: hover {
        background: #000 url(grad_dark.png) repeat-x left bottom;
        background: -moz-linear-gradient(top, #000 0%, #000 50%, #000 51%, #525252 100%);
        background: -webkit-gradient(linear, left top, left bottom, color-stop(0%, #000), color-stop(50%, #000), color-stop(51%, #000), color-stop(100%, #525252));
        background: -webkit-linear-gradient(top, #000 0%, #000 50%, #000 51%, #525252 100%);
        background: -o-linear-gradient(top, #000 0%, #000 50%, #000 51%, #525252 100%);
        background: -ms-linear-gradient(top, #000 0%, #000 50%, #000 51%, #525252 100%);
        background: linear-gradient(to bottom, #000 0%, #000 50%, #000 51%, #c 100%);
        filter: progid: dximagetransform.microsoft.gradient(startColorstr='#000', endColorstr='#000', GradientType=0);
        filter: none;
    }
    #cssmenu > ul > li: first-child a {
        border-radius: 5px 0 0 5px;
        -moz-border-radius: 5px 0 0 5px;
        -webkit-border-radius: 5px 0 0 5px;
        border-left: 1px solid #000;
    }
    #cssmenu > ul > li: last-child a {
        border-radius: 0 5px 5px 0;
        -moz-border-radius: 0 5px 5px 0;
        -webkit-border-radius: 0 5px 5px 0;
    }
    #cssmenu .has-sub: hover ul {
        display: block;
    }
    #cssmenu .has-sub ul {
        display: none;
        position: absolute;
        top: 36px;
        left: -1px;
        min-width: 100%;
        text-align: center;
        /* IE7 */
        *width: 100%;
    }
    #cssmenu .has-sub ul li {
        text-align: center;
    }
    #cssmenu .has-sub ul li a {
        border-top: 0 none;
        border-left: 1px solid #000;
        display: block;
        line-height: 120%;
        padding: 9px 5px;
        text-align: center;
    }
</style>

<div id='cssmenu'>
    <ul>
        <li class='Stream Portal'><a href="./home.html" >Home</a>
        </li>
        <li class='has-sub'><a href="./home.html" >TV</a>
            <ul>
                <li><a href="./justintv.html" >Justin</a></li>
                <li><a href="http://lmtv.us/#" >LM</a></li>
                <li><a href="http://www.mtv.com/ontv/" >MTV</a></li>
                <li><a href="http://www.spike.com/episodes" >Spike</a></li>
                <li><a href="http://www.cartoon-world.tv/cartoon-list/" >Toon</a></li>
                <li><a href="./tubtub.html" >TubTub</a></li>
                <li class='last'><a href="shows" >Veetle</a></li>
            </ul>
        </li>
        <li class='has-sub'><a href="./home.html" >Movies</a>
            <ul>
                <li><a href="./moviesearchframe.html" >Movie Search</a></li>
                <li><a href="http://topdocumentaryfilms.com/" >Documentaries</a></li>
                <li><a href="http://freeonlinemoviestream.co/" >Movie Stream</a></li>
                <li><a href="./megashare.html" >MegaShare</a></li>
                <li><a href="http://www.cartoon-world.tv/movie-list/" >Toon</a></li>
                <li class='last'><a href="http://watch32.com/new-movies.html" >Watch32</a></li>
            </ul>
        </li>
    </ul>
</div>

Answer 1

Here is a working example (only had to add a few lines of js): http://jsfiddle.net/wHF97/

jQuery(function($) {
    $(document).ready( function() {
        $('#cssmenu').stickUp();
    });
});

It uses a jQuery plugin called stickUp. Their main page also has a working example: http://lirancohen.github.io/stickUp/#

Note: I included the stickUp plugin using the "External Resources" in the left-pane of the jsfiddle.

Answer 2

jQuery scroll() event and $(window).scrollTop() returns the current position of the window scrolled. If that value goes above the position of the item you want to 'follow' the scroll, use addClass to give that item: position:fixed; top:0; That way, when the user scrolls down past the position of the item, it will suddenly (and nicely) move with the window scroll. You may have to recalc the left of the item. If the position of the window is above, removeClass the fixed position.

Answer 3

Used the css position:fixed attribute:

http://www.w3.org/Style/Examples/007/menus.en.html

Answer 4

#cssmenu {position:fixed;top:0px}