CSS3 drop down menu

by Brodingo

HTML

<div id="block-menu-menu-glimmerstaffmenu" class="block block-menu">
    <div class="content">
        <ul class="menu">
            <li class="leaf first">
                <a href="#">One</a>
            </li>
            <li class="expanded">
                <a href="#">Two</a>
                <ul class="menu">
                    <li class="leaf first">
                        <a href="#"">Sub 1</a>
                    </li>
                    <li class="leaf expanded">
                        <a href="#">Sub 2</a>
                        <ul class="menu">
                            <li class="leaf first">
                                <a href="#">Sub Sub 1</a>
                            </li>
                            <li class="leaf expanded">
                                <a href="#">Sub Sub 2</a>
                                <ul class="menu">
                                    <li class="leaf first">
                                        <a href="#">Sub Sub Sub 1</a>
                                    </li>
                                    <li class="leaf">
                                        <a href="#">Sub Sub Sub 2</a>
                                    </li>
                                    <li class="leaf last">
                                        <a href="#">Sub Sub Sub 3</a>
                                    </li>
                                </ul>                           
                            </li>
                            <li class="leaf last">
                                <a href="#">Sub Sub 3</a>
                            </li>
                        </ul>                      
                    </li>
                    <li class="leaf last">
                        <a href="#">Sub 3</a>
                    </li>
                </ul>
            </li>
            <li class="leaf last">
                <a href="#">Three</a>
            </li>
        </ul>
    </div>
</div>
                ...

CSS

body {background-color:#ccc;font-family: sans-serif;font-size: 14px}
a {text-decoration: none;}

#block-menu-menu-glimmerstaffmenu {
    position: relative;
    z-index: 100;
    zoom: 1;
    height: 25px;
    margin: 0 10px 10px;
    background-color: #928982;
    -webkit-border-radius: 8px;
       -moz-border-radius: 8px;
            border-radius: 8px;
    -webkit-box-shadow: inset 0 0 2px rgba(0,0,0,.4), 0 1px 0 rgba(255,255,255,.4);
       -moz-box-shadow: inset 0 0 2px rgba(0,0,0,.4), 0 1px 0 rgba(255,255,255,.4);
            box-shadow: inset 0 0 2px rgba(0,0,0,.4), 0 1px 0 rgba(255,255,255,.4);
}

#block-menu-menu-glimmerstaffmenu:before {
    float: left;
    height: 25px;
    padding: 0 15px 0 20px;
    margin-right: 10px;
    background-image: -webkit-gradient(linear, left top, left bottom,
        from(rgba(255,255,255,.4)),
        to(rgba(255,255,255,0)));
    background-image: -moz-linear-gradient(top,
        rgba(255,255,255,.4),
        rgba(255,255,255,0));
    background-image: linear-gradient(top,
        rgba(255,255,255,.4),
        rgba(255,255,255,0));
    background-color: #d08010;
    content: "PRISM ▸";
    color: #fff;
    text-shadow: 1px 1px 2px rgba(0,0,0,.5);
    font-weight: bold;
    line-height: 25px;
    -webkit-border-top-left-radius: 6px;
        -moz-border-radius-topleft: 6px;
            border-top-left-radius: 6px;
    -webkit-border-bottom-left-radius: 6px;
        -moz-border-radius-bottomleft: 6px;
            border-bottom-left-radius: 6px;
    -webkit-box-shadow: 1px 0 2px -1px rgba(0,0,0,.4), inset 1px 1px 2px -1px rgba(0,0,0,.4);
       -moz-box-shadow: 1px 0 2px -1px rgba(0,0,0,.4), inset 1px 1px 2px -1px rgba(0,0,0,.4);
            box-shadow: 1px 0 2px -1px rgba(0,0,0,.4), inset 1px 1px 2px -1px rgba(0,0,0,.4);
}

#block-menu-menu-glimmerstaffmenu ul.menu li {
    position: relative;
    float: left;
    display: block;
    padding: 0;
    margin: 0;
    text-align: center;
}

#block-menu-menu-glimmerstaffmenu...

JavaScript

//css3 drop down menu

$(function(){
    $('body').noisy();
});

(function(a) {
    a.fn.noisy = function(b) {
        return this.each(function() {
            var c = document.createElement("canvas"),
                h = c.getContext("2d");
            if (!h && b.fallback !== undefined && b.fallback !== "") a(this).css("background-image", "url(" + b.fallback + ")," + a(this).css("background-image"));
            else {
                b = a.extend({}, a.fn.noisy.defaults, b);
                c.width = c.height = b.size;
                for (var d = h.createImageData(c.width, c.height), e = function(i, k) {
                    return Math.floor(Math.random() * (k - i) + i)
                }, j = 0; j < b.intensity * Math.pow(b.size, 2); j++) {
                    var f = e(0, c.width),
                        g = e(0, c.height);
                    f = (f + g * d.width) * 4;
                    g = e(0, 255);
                    d.data[f] = g;
                    d.data[f + 1] = b.monochrome ? g : e(0, 255);
                    d.data[f + 2] = b.monochrome ? g : e(0, 255);
                    d.data[f + 3] = e(0, 255 * b.opacity)
                }
                h.putImageData(d, 0, 0);
                a(this).data("original-css") == undefined && a(this).data("original-css", a(this).css("background-image"));
                a(this).css("background-image", "url(" + c.toDataURL("image/png") + ")," + a(this).data("original-css"))
            }
        })
    };
    a.fn.noisy.defaults = {
        intensity: 0.9,
        size: 200,
        opacity: 0.08,
        fallback: "",
        monochrome: false
    }
})(jQuery);