所以我想做的是让我的主菜单浮动，但同时是可调整大小的（窗口宽度），我也有一个隐藏的子菜单，我希望它遵循主菜单的规则。

此外，主菜单并不是从页面的顶部开始，但当你向下滚动时，我希望它能贴在顶部边缘并在那里Rest。

jsFiddle在这里

CSS

#menutop {
    color: #FFF;
    display: block;
    padding-top: 5px;
    text-transform: none;
    text-align: center;
    font-size: 20px;
    word-spacing: 1em;
    font-weight: normal;
    height: 65px;
    font-family: 'airship_27regular', sans-serif;
    letter-spacing: 0.05em;
    position: relative;
    z-index: 9000;
}

.dropdownwrap {
    height: 150px;
    background-color: rgb(245, 245, 245);
    display: none;
    padding: 20px;
    width: auto;
    margin-top: 0px;
    margin-right: auto;
    margin-left: auto;
}

#dropdown {
    text-transform: none;
    text-align: center;
    font-size: 20px;
    letter-spacing: 0.05em;
    color: rgb(102, 102, 102);
    position: relative;
    z-index: 99999;
    text-decoration: none;
}

#dropdown:hover {
    text-decoration: none;
    color: #FFFFFF;
}

#CenterMenu {
    display: block;
    height: 100px;
    width: 700px;
    margin-top: 20px;
    margin-bottom: 0px;
    position: relative;
    z-index: 999999;
    float: none;
    margin-left: auto;
    margin-right: auto;
}

.insideMenu {
    display: block;
    float: right;
    height: 88px;
    width: 130px;
    margin-top: 12px;
}

.insideMenu h1 {
    font-family: 'airship_27regular', sans-serif;
    font-size: 14px;
    line-height: 14px;
    font-weight: lighter;
    word-spacing: 12px;
    letter-spacing: 0.1em;
    color: rgb(0, 0, 0);
    text-align: left;
}

.insideMenu p {
    font-size: 10px;
    line-height: 18px;
    font-weight: 400;
    word-spacing: 1.5px;
    letter-spacing: 0.1em;
    color: rgb(0, 102, 102);
    text-align: left;
}

JAVASCRIPT（jQuery的什么版本？）

$(document).ready(function (e) {

    $('#dropdown').on('click', function () {

        $('.dropdownwrap').slideToggle();

    });

});

function MM_preloadImages() { //v3.0
    var d = document;
    if (d.images) {
        if (!d.MM_p) d.MM_p = new Array();
        var i, j = d.MM_p.length, a = MM_preloadImages.arguments;
        for (i = 0; i < a.length; i++)
            if (a[i].indexOf("#") != 0) {
                d.MM_p[j] = new Image;
                d.MM_p[j++].src = a[i];
            }
    }
}

function MM_swapImgRestore() { //v3.0
    var i, x, a = document.MM_sr;
    for (i = 0; a && i < a.length && (x = a[i]) && x.oSrc; i++) x.src = x.oSrc;
}

function MM_findObj(n, d) { //v4.01
    var p, i, x;
    if (!d) d = document;
    if ((p = n.indexOf("?")) > 0 && parent.frames.length) {
        d = parent.frames[n.substring(p + 1)].document;
        n = n.substring(0, p);
    }
    if (!(x = d[n]) && d.all) x = d.all[n];
    for (i = 0; !x && i < d.forms.length; i++) x = d.forms[i][n];
    for (i = 0; !x && d.layers && i < d.layers.length; i++) x = MM_findObj(n, d.layers[i].document);
    if (!x && d.getElementById) x = d.getElementById(n);
    return x;
}

function MM_swapImage() { //v3.0
    var i, j = 0, x, a = MM_swapImage.arguments;
    document.MM_sr = new Array;
    for (i = 0; i < (a.length - 2); i += 3)
        if ((x = MM_findObj(a[i])) != null) {
            document.MM_sr[j++] = x;
            if (!x.oSrc) x.oSrc = x.src;
            x.src = a[i + 2];
        }
}

function getRandomColor() {
    var letters = '0123456789ABCDEF'.split('');
    var color = '#';
    for (var i = 0; i < 6; i++) {
        color += letters[Math.round(Math.random() * 15)];
    }
    return color;
}

HTML（固定HTML格式，删除额外标记，添加缺失标记）

<div id="menutop">
    <p>
        <a href="index.html"> ABOUT</a>
        <a href="#" id="dropdown" name="dropdown" title="Click This Button"> WORK</a>
        <a href="contact.html"> CONTACT</a>
    </p>
</div>
<div class="dropdownwrap">
    <div id="CenterMenu">
        <div class="insideMenu">
            <h1>BRANDING</h1>
            <p>
                <a href="JessWork.html">X20</a>
                <br />
                <a href="">FAUNE DU QC.</a>
                <br />
                <a href="">TIANGLE</a>
                <br />
                <a href="">NAT GEO</a>
            </p>
        </div>
        <div class="insideMenu">
            <h1>MULTIMEDIA</h1>
            <p>
                <a href="">SMOKED MEAT</a>
                <br />
                <a href="">CITYSCAPES</a>
                <br />
                <a href="">M. MASON</a>
            </p>
        </div>
        <div class="insideMenu">
            <h1>ILLUSTRATION</h1>
            <p>
                <a href="">TUNAS & <br />TRUMPETS</a>
                <br />
                <a href="">PUNCTUATION PAMPHLETS</a>
            </p>
        </div>
        <div class="insideMenu">
            <h1>PACKAGING</h1>
            <p>
                <a href="">SPICE OF LIFE</a>
                <br />
                <a href="">PERSONAL<br />PRESS KIT</a>
            </p>
        </div>
        <div class="insideMenu">
            <h1>PUBLICATION</h1>
            <p>
                <a href="">JOHN CAGE</a>
                <br />
                <a href="">LEAD</a>
                <br />
                <a href="">SOCIAL ISSUE</a>
                <br />
                <a href="">CALL FESTIVAL</a>
            </p>
        </div>
    </div>
</div>