Pen Settings

HTML

CSS

CSS Base

Vendor Prefixing

Add External Stylesheets/Pens

Any URLs added here will be added as <link>s in order, and before the CSS in the editor. You can use the CSS from another Pen by using its URL and the proper URL extension.

+ add another resource

JavaScript

Babel includes JSX processing.

Add External Scripts/Pens

Any URL's added here will be added as <script>s in order, and run before the JavaScript in the editor. You can use the URL of any other Pen and it will include the JavaScript from that Pen.

+ add another resource

Packages

Add Packages

Search for and use JavaScript packages from npm here. By selecting a package, an import statement will be added to the top of the JavaScript editor for this package.

Behavior

Auto Save

If active, Pens will autosave every 30 seconds after being saved once.

Auto-Updating Preview

If enabled, the preview panel updates automatically as you code. If disabled, use the "Run" button to update.

Format on Save

If enabled, your code will be formatted when you actively save your Pen. Note: your code becomes un-folded during formatting.

Editor Settings

Code Indentation

Want to change your Syntax Highlighting theme, Fonts and more?

Visit your global Editor Settings.

HTML

              
                    <div id="container">
        <div id="dropdown-container">
            <div id="dropdown-preview">
                <div id="dropdown-preview-bg-alt"></div>
                <div id="dropdown-preview-bg"></div>
                <div id="dropdown-preview-text-alt">Dropdown</div>
                <div id="dropdown-preview-text">Dropdown</div>
                <div id="dropdown-preview-arrow-down-alt"></div>
                <div id="dropdown-preview-arrow-down"></div>
            </div>
            <div id="dropdown-list">
                <div class="dropdown-list-row with-sub">
                    <div class="dropdown-list-row-icon-container">
                        <img class="dropdown-list-row-plus-white dropdown-list-row-overlay-icons" src="http://bennettcodes.com/sites/full/dropdown-dynamic-bezier/images/icons/plus-white.svg">
                        <img class="dropdown-list-row-minus-white dropdown-list-row-overlay-icons" src="http://bennettcodes.com/sites/full/dropdown-dynamic-bezier/images/icons/minus-white.svg">
                    </div>
                    <img class="dropdown-list-row-plus-black" src="http://bennettcodes.com/sites/full/dropdown-dynamic-bezier/images/icons/plus-black.svg">
                    <img class="dropdown-list-row-plus-orange" src="http://bennettcodes.com/sites/full/dropdown-dynamic-bezier/images/icons/plus-orange.svg">
                    <div class="dropdown-list-row-bg-alt-container">
                        <div class="dropdown-list-row-bg-alt"></div>
                    </div>
                    <div class="dropdown-list-row-bg"></div>
                    <div class="dropdown-list-row-text-alt">Item</div>
                    <div class="dropdown-list-row-text">Item</div>
                    <div class="dropdown-list-sub">
                        <div class="dropdown-list-row-sub">
                            <div class="dropdown-list-row-sub-bg-alt-container">
                                <div class="dropdown-list-row-sub-bg-alt"></div>
                            </div>
                            <div class="dropdown-list-row-sub-bg"></div>
                            <div class="dropdown-list-row-sub-text-alt">Item</div>
                            <div class="dropdown-list-row-sub-text">Item</div>
                        </div>
                        <div class="dropdown-list-row-sub">
                            <div class="dropdown-list-row-sub-bg-alt-container">
                                <div class="dropdown-list-row-sub-bg-alt"></div>
                            </div>
                            <div class="dropdown-list-row-sub-bg"></div>
                            <div class="dropdown-list-row-sub-text-alt">Item</div>
                            <div class="dropdown-list-row-sub-text">Item</div>
                        </div>
                        <div class="dropdown-list-row-sub">
                            <div class="dropdown-list-row-sub-bg-alt-container">
                                <div class="dropdown-list-row-sub-bg-alt"></div>
                            </div>
                            <div class="dropdown-list-row-sub-bg"></div>
                            <div class="dropdown-list-row-sub-text-alt">Item</div>
                            <div class="dropdown-list-row-sub-text">Item</div>
                        </div>
                        <div class="dropdown-list-row-sub">
                            <div class="dropdown-list-row-sub-bg-alt-container">
                                <div class="dropdown-list-row-sub-bg-alt"></div>
                            </div>
                            <div class="dropdown-list-row-sub-bg"></div>
                            <div class="dropdown-list-row-sub-text-alt">Item</div>
                            <div class="dropdown-list-row-sub-text">Item</div>
                        </div>
                        <div class="dropdown-list-row-sub">
                            <div class="dropdown-list-row-sub-bg-alt-container">
                                <div class="dropdown-list-row-sub-bg-alt"></div>
                            </div>
                            <div class="dropdown-list-row-sub-bg"></div>
                            <div class="dropdown-list-row-sub-text-alt">Item</div>
                            <div class="dropdown-list-row-sub-text">Item</div>
                        </div>
                    </div>
                </div>
                <div class="dropdown-list-row with-sub">
                    <div class="dropdown-list-row-icon-container">
                        <img class="dropdown-list-row-plus-white dropdown-list-row-overlay-icons" src="http://bennettcodes.com/sites/full/dropdown-dynamic-bezier/images/icons/plus-white.svg">
                        <img class="dropdown-list-row-minus-white dropdown-list-row-overlay-icons" src="http://bennettcodes.com/sites/full/dropdown-dynamic-bezier/images/icons/minus-white.svg">
                    </div>
                    <img class="dropdown-list-row-plus-black" src="http://bennettcodes.com/sites/full/dropdown-dynamic-bezier/images/icons/plus-black.svg">
                    <img class="dropdown-list-row-plus-orange" src="http://bennettcodes.com/sites/full/dropdown-dynamic-bezier/images/icons/plus-orange.svg">
                    <div class="dropdown-list-row-bg-alt-container">
                        <div class="dropdown-list-row-bg-alt"></div>
                    </div>
                    <div class="dropdown-list-row-bg"></div>
                    <div class="dropdown-list-row-text-alt">Item</div>
                    <div class="dropdown-list-row-text">Item</div>
                    <div class="dropdown-list-sub">
                        <div class="dropdown-list-row-sub">
                            <div class="dropdown-list-row-sub-bg-alt-container">
                                <div class="dropdown-list-row-sub-bg-alt"></div>
                            </div>
                            <div class="dropdown-list-row-sub-bg"></div>
                            <div class="dropdown-list-row-sub-text-alt">Item</div>
                            <div class="dropdown-list-row-sub-text">Item</div>
                        </div>
                        <div class="dropdown-list-row-sub">
                            <div class="dropdown-list-row-sub-bg-alt-container">
                                <div class="dropdown-list-row-sub-bg-alt"></div>
                            </div>
                            <div class="dropdown-list-row-sub-bg"></div>
                            <div class="dropdown-list-row-sub-text-alt">Item</div>
                            <div class="dropdown-list-row-sub-text">Item</div>
                        </div>
                        <div class="dropdown-list-row-sub">
                            <div class="dropdown-list-row-sub-bg-alt-container">
                                <div class="dropdown-list-row-sub-bg-alt"></div>
                            </div>
                            <div class="dropdown-list-row-sub-bg"></div>
                            <div class="dropdown-list-row-sub-text-alt">Item</div>
                            <div class="dropdown-list-row-sub-text">Item</div>
                        </div>
                        <div class="dropdown-list-row-sub">
                            <div class="dropdown-list-row-sub-bg-alt-container">
                                <div class="dropdown-list-row-sub-bg-alt"></div>
                            </div>
                            <div class="dropdown-list-row-sub-bg"></div>
                            <div class="dropdown-list-row-sub-text-alt">Item</div>
                            <div class="dropdown-list-row-sub-text">Item</div>
                        </div>
                        <div class="dropdown-list-row-sub">
                            <div class="dropdown-list-row-sub-bg-alt-container">
                                <div class="dropdown-list-row-sub-bg-alt"></div>
                            </div>
                            <div class="dropdown-list-row-sub-bg"></div>
                            <div class="dropdown-list-row-sub-text-alt">Item</div>
                            <div class="dropdown-list-row-sub-text">Item</div>
                        </div>
                    </div>
                </div>
                <div class="dropdown-list-row with-sub">
                    <div class="dropdown-list-row-icon-container">
                        <img class="dropdown-list-row-plus-white dropdown-list-row-overlay-icons" src="http://bennettcodes.com/sites/full/dropdown-dynamic-bezier/images/icons/plus-white.svg">
                        <img class="dropdown-list-row-minus-white dropdown-list-row-overlay-icons" src="http://bennettcodes.com/sites/full/dropdown-dynamic-bezier/images/icons/minus-white.svg">
                    </div>
                    <img class="dropdown-list-row-plus-black" src="http://bennettcodes.com/sites/full/dropdown-dynamic-bezier/images/icons/plus-black.svg">
                    <img class="dropdown-list-row-plus-orange" src="http://bennettcodes.com/sites/full/dropdown-dynamic-bezier/images/icons/plus-orange.svg">
                    <div class="dropdown-list-row-bg-alt-container">
                        <div class="dropdown-list-row-bg-alt"></div>
                    </div>
                    <div class="dropdown-list-row-bg"></div>
                    <div class="dropdown-list-row-text-alt">Item</div>
                    <div class="dropdown-list-row-text">Item</div>
                    <div class="dropdown-list-sub">
                        <div class="dropdown-list-row-sub">
                            <div class="dropdown-list-row-sub-bg-alt-container">
                                <div class="dropdown-list-row-sub-bg-alt"></div>
                            </div>
                            <div class="dropdown-list-row-sub-bg"></div>
                            <div class="dropdown-list-row-sub-text-alt">Item</div>
                            <div class="dropdown-list-row-sub-text">Item</div>
                        </div>
                        <div class="dropdown-list-row-sub">
                            <div class="dropdown-list-row-sub-bg-alt-container">
                                <div class="dropdown-list-row-sub-bg-alt"></div>
                            </div>
                            <div class="dropdown-list-row-sub-bg"></div>
                            <div class="dropdown-list-row-sub-text-alt">Item</div>
                            <div class="dropdown-list-row-sub-text">Item</div>
                        </div>
                        <div class="dropdown-list-row-sub">
                            <div class="dropdown-list-row-sub-bg-alt-container">
                                <div class="dropdown-list-row-sub-bg-alt"></div>
                            </div>
                            <div class="dropdown-list-row-sub-bg"></div>
                            <div class="dropdown-list-row-sub-text-alt">Item</div>
                            <div class="dropdown-list-row-sub-text">Item</div>
                        </div>
                        <div class="dropdown-list-row-sub">
                            <div class="dropdown-list-row-sub-bg-alt-container">
                                <div class="dropdown-list-row-sub-bg-alt"></div>
                            </div>
                            <div class="dropdown-list-row-sub-bg"></div>
                            <div class="dropdown-list-row-sub-text-alt">Item</div>
                            <div class="dropdown-list-row-sub-text">Item</div>
                        </div>
                        <div class="dropdown-list-row-sub">
                            <div class="dropdown-list-row-sub-bg-alt-container">
                                <div class="dropdown-list-row-sub-bg-alt"></div>
                            </div>
                            <div class="dropdown-list-row-sub-bg"></div>
                            <div class="dropdown-list-row-sub-text-alt">Item</div>
                            <div class="dropdown-list-row-sub-text">Item</div>
                        </div>
                    </div>
                </div>
                <div class="dropdown-list-row with-sub">
                    <div class="dropdown-list-row-icon-container">
                        <img class="dropdown-list-row-plus-white dropdown-list-row-overlay-icons" src="http://bennettcodes.com/sites/full/dropdown-dynamic-bezier/images/icons/plus-white.svg">
                        <img class="dropdown-list-row-minus-white dropdown-list-row-overlay-icons" src="http://bennettcodes.com/sites/full/dropdown-dynamic-bezier/images/icons/minus-white.svg">
                    </div>
                    <img class="dropdown-list-row-plus-black" src="http://bennettcodes.com/sites/full/dropdown-dynamic-bezier/images/icons/plus-black.svg">
                    <img class="dropdown-list-row-plus-orange" src="http://bennettcodes.com/sites/full/dropdown-dynamic-bezier/images/icons/plus-orange.svg">
                    <div class="dropdown-list-row-bg-alt-container">
                        <div class="dropdown-list-row-bg-alt"></div>
                    </div>
                    <div class="dropdown-list-row-bg"></div>
                    <div class="dropdown-list-row-text-alt">Item</div>
                    <div class="dropdown-list-row-text">Item</div>
                    <div class="dropdown-list-sub">
                        <div class="dropdown-list-row-sub">
                            <div class="dropdown-list-row-sub-bg-alt-container">
                                <div class="dropdown-list-row-sub-bg-alt"></div>
                            </div>
                            <div class="dropdown-list-row-sub-bg"></div>
                            <div class="dropdown-list-row-sub-text-alt">Item</div>
                            <div class="dropdown-list-row-sub-text">Item</div>
                        </div>
                        <div class="dropdown-list-row-sub">
                            <div class="dropdown-list-row-sub-bg-alt-container">
                                <div class="dropdown-list-row-sub-bg-alt"></div>
                            </div>
                            <div class="dropdown-list-row-sub-bg"></div>
                            <div class="dropdown-list-row-sub-text-alt">Item</div>
                            <div class="dropdown-list-row-sub-text">Item</div>
                        </div>
                        <div class="dropdown-list-row-sub">
                            <div class="dropdown-list-row-sub-bg-alt-container">
                                <div class="dropdown-list-row-sub-bg-alt"></div>
                            </div>
                            <div class="dropdown-list-row-sub-bg"></div>
                            <div class="dropdown-list-row-sub-text-alt">Item</div>
                            <div class="dropdown-list-row-sub-text">Item</div>
                        </div>
                        <div class="dropdown-list-row-sub">
                            <div class="dropdown-list-row-sub-bg-alt-container">
                                <div class="dropdown-list-row-sub-bg-alt"></div>
                            </div>
                            <div class="dropdown-list-row-sub-bg"></div>
                            <div class="dropdown-list-row-sub-text-alt">Item</div>
                            <div class="dropdown-list-row-sub-text">Item</div>
                        </div>
                        <div class="dropdown-list-row-sub">
                            <div class="dropdown-list-row-sub-bg-alt-container">
                                <div class="dropdown-list-row-sub-bg-alt"></div>
                            </div>
                            <div class="dropdown-list-row-sub-bg"></div>
                            <div class="dropdown-list-row-sub-text-alt">Item</div>
                            <div class="dropdown-list-row-sub-text">Item</div>
                        </div>
                    </div>
                </div>
                <div class="dropdown-list-row with-sub">
                    <div class="dropdown-list-row-icon-container">
                        <img class="dropdown-list-row-plus-white dropdown-list-row-overlay-icons" src="http://bennettcodes.com/sites/full/dropdown-dynamic-bezier/images/icons/plus-white.svg">
                        <img class="dropdown-list-row-minus-white dropdown-list-row-overlay-icons" src="http://bennettcodes.com/sites/full/dropdown-dynamic-bezier/images/icons/minus-white.svg">
                    </div>
                    <img class="dropdown-list-row-plus-black" src="http://bennettcodes.com/sites/full/dropdown-dynamic-bezier/images/icons/plus-black.svg">
                    <img class="dropdown-list-row-plus-orange" src="http://bennettcodes.com/sites/full/dropdown-dynamic-bezier/images/icons/plus-orange.svg">
                    <div class="dropdown-list-row-bg-alt-container">
                        <div class="dropdown-list-row-bg-alt"></div>
                    </div>
                    <div class="dropdown-list-row-bg"></div>
                    <div class="dropdown-list-row-text-alt">Item</div>
                    <div class="dropdown-list-row-text">Item</div>
                    <div class="dropdown-list-sub">
                        <div class="dropdown-list-row-sub">
                            <div class="dropdown-list-row-sub-bg-alt-container">
                                <div class="dropdown-list-row-sub-bg-alt"></div>
                            </div>
                            <div class="dropdown-list-row-sub-bg"></div>
                            <div class="dropdown-list-row-sub-text-alt">Item</div>
                            <div class="dropdown-list-row-sub-text">Item</div>
                        </div>
                        <div class="dropdown-list-row-sub">
                            <div class="dropdown-list-row-sub-bg-alt-container">
                                <div class="dropdown-list-row-sub-bg-alt"></div>
                            </div>
                            <div class="dropdown-list-row-sub-bg"></div>
                            <div class="dropdown-list-row-sub-text-alt">Item</div>
                            <div class="dropdown-list-row-sub-text">Item</div>
                        </div>
                        <div class="dropdown-list-row-sub">
                            <div class="dropdown-list-row-sub-bg-alt-container">
                                <div class="dropdown-list-row-sub-bg-alt"></div>
                            </div>
                            <div class="dropdown-list-row-sub-bg"></div>
                            <div class="dropdown-list-row-sub-text-alt">Item</div>
                            <div class="dropdown-list-row-sub-text">Item</div>
                        </div>
                        <div class="dropdown-list-row-sub">
                            <div class="dropdown-list-row-sub-bg-alt-container">
                                <div class="dropdown-list-row-sub-bg-alt"></div>
                            </div>
                            <div class="dropdown-list-row-sub-bg"></div>
                            <div class="dropdown-list-row-sub-text-alt">Item</div>
                            <div class="dropdown-list-row-sub-text">Item</div>
                        </div>
                        <div class="dropdown-list-row-sub">
                            <div class="dropdown-list-row-sub-bg-alt-container">
                                <div class="dropdown-list-row-sub-bg-alt"></div>
                            </div>
                            <div class="dropdown-list-row-sub-bg"></div>
                            <div class="dropdown-list-row-sub-text-alt">Item</div>
                            <div class="dropdown-list-row-sub-text">Item</div>
                        </div>
                    </div>
                </div>
            </div>
        </div>
    </div>
              
            
!

CSS

              
                body,
html {
    margin: 0;
    padding: 0;
    font-family: 'Open Sans', sans-serif;
    overflow-x:hidden;
}

h1,
h2,
h3,
h4,
h5,
h6,
p,
a,
li {
    margin: 0;
    padding: 0;
    letter-spacing: 0;
}

p {
    font-size: 1vw;
}

h1 {
    font-size: 8vw;
}

h2 {
    font-size: 6vw;
}

h3 {
    font-size: 5vw;
}

h4 {
    font-size: 4vw;
}

h5 {
    font-size: 3vw;
}

h6 {
    font-size: 2vw;
}

#container {
    width: 100%;
    height: 100%;
    position: fixed;
    /* Permalink - use to edit and share this gradient: http://colorzilla.com/gradient-editor/#f7f7f7+0,bababa+100 */
    background: rgb(247, 247, 247);
    /* Old browsers */
    background: -moz-radial-gradient(center, ellipse cover, rgba(247, 247, 247, 1) 0%, rgba(186, 186, 186, 1) 100%);
    /* FF3.6-15 */
    background: -webkit-radial-gradient(center, ellipse cover, rgba(247, 247, 247, 1) 0%, rgba(186, 186, 186, 1) 100%);
    /* Chrome10-25,Safari5.1-6 */
    background: radial-gradient(ellipse at center, rgba(247, 247, 247, 1) 0%, rgba(186, 186, 186, 1) 100%);
    /* W3C, IE10+, FF16+, Chrome26+, Opera12+, Safari7+ */
    filter: progid: DXImageTransform.Microsoft.gradient( startColorstr='#f7f7f7', endColorstr='#bababa', GradientType=1);
    overflow-y: scroll;
    /* IE6-9 fallback on horizontal gradient */
    top: 0;
    left: 0;
    z-index: 0;
    overflow-x: hidden !important;
}

#dropdown-container {
    width: 500px;
    height: auto;
    min-height: 100px;
    position: relative;
    margin:0 auto;
    opacity: 0;
}

#dropdown-preview {
    width: 100%;
    height: 100px;
    position: relative;
    /*box-shadow: inset 0px 0px 25px rgba(0, 0, 0, 0.1);*/
    overflow-x: hidden;
    cursor: pointer;
    float: left;
}

#dropdown-preview-bg {
    width: 100%;
    height: 100%;
    position: absolute;
    /* Permalink - use to edit and share this gradient: http://colorzilla.com/gradient-editor/#ffffff+17,d3d3d3+100 */
    background: rgb(255, 255, 255);
    /* Old browsers */
    background: -moz-linear-gradient(-45deg, rgba(255, 255, 255, 1) 17%, rgba(211, 211, 211, 1) 100%);
    /* FF3.6-15 */
    background: -webkit-linear-gradient(-45deg, rgba(255, 255, 255, 1) 17%, rgba(211, 211, 211, 1) 100%);
    /* Chrome10-25,Safari5.1-6 */
    background: linear-gradient(135deg, rgba(255, 255, 255, 1) 17%, rgba(211, 211, 211, 1) 100%);
    /* W3C, IE10+, FF16+, Chrome26+, Opera12+, Safari7+ */
    filter: progid: DXImageTransform.Microsoft.gradient( startColorstr='#ffffff', endColorstr='#d3d3d3', GradientType=1);
    /* IE6-9 fallback on horizontal gradient */
    pointer-events: none;
    top: 0;
    left: 0;
    z-index: 0;
}

#dropdown-preview-bg-alt {
    width: 100%;
    height: 100%;
    position: absolute;
    /* Permalink - use to edit and share this gradie
    /* Permalink - use to edit and share this gradient: http://colorzilla.com/gradient-editor/#ff7f04+0,ffd97a+100 */
    background: rgb(255, 127, 4);
    /* Old browsers */
    background: -moz-linear-gradient(-45deg, rgba(255, 127, 4, 1) 0%, rgba(255, 217, 122, 1) 100%);
    /* FF3.6-15 */
    background: -webkit-linear-gradient(-45deg, rgba(255, 127, 4, 1) 0%, rgba(255, 217, 122, 1) 100%);
    /* Chrome10-25,Safari5.1-6 */
    background: linear-gradient(135deg, rgba(255, 127, 4, 1) 0%, rgba(255, 217, 122, 1) 100%);
    /* W3C, IE10+, FF16+, Chrome26+, Opera12+, Safari7+ */
    filter: progid: DXImageTransform.Microsoft.gradient( startColorstr='#ff7f04', endColorstr='#ffd97a', GradientType=1);
    /* IE6-9 fallback on horizontal gradient */
    pointer-events: none;
    top: 0;
    left: 0;
    opacity: 0;
    z-index: 1;
}

#dropdown-preview-text {
    width: calc(100% - 50px);
    height: 100%;
    position: absolute;
    line-height: 100px;
    text-align: left;
    font-family: 'Open Sans', sans-serif;
    font-size: 40px;
    font-weight: 100;
    padding: 0 25px;
    pointer-events: none;
    top: 0;
    left: 0;
    z-index: 0;
}

#dropdown-preview-text-alt {
    width: calc(100% - 50px);
    height: 100%;
    position: absolute;
    line-height: 100px;
    text-align: left;
    font-family: 'Open Sans', sans-serif;
    font-size: 40px;
    font-weight: 100;
    padding: 0 25px;
    pointer-events: none;
    color: white;
    top: 0;
    left: 0;
    z-index: 20;
}

#dropdown-preview-arrow-down {
    width: 0;
    height: 0;
    border-left: 20px solid transparent;
    border-right: 20px solid transparent;
    border-top: 20px solid #000;
    position: absolute;
    top: calc(50% - 10px);
    right: 25px;
    pointer-events: none;
    z-index: 0;
}

#dropdown-preview-arrow-down-alt {
    width: 0;
    height: 0;
    border-left: 20px solid transparent;
    border-right: 20px solid transparent;
    border-top: 20px solid #fff;
    position: absolute;
    top: calc(50% - 10px);
    right: 25px;
    pointer-events: none;
    z-index: 20;
}

#dropdown-list {
    width: 100%;
    height: auto;
    min-height: 100px;
    position: relative;
    pointer-events: none;
    float: left;
}

.dropdown-list-row {
    width: 100%;
    height: 100px;
    position: relative;
    float: left;
}

.dropdown-list-row-bg-alt-container {
    width: 100%;
    height: 100px;
    position: absolute;
    overflow: hidden;
    pointer-events: none;
    top: 0;
    left: 0;
    z-index: 1;
}

.dropdown-list-row-bg {
    width: 100%;
    height: 100px;
    position: absolute;
    /* Permalink - use to edit and share this gradient: http://colorzilla.com/gradient-editor/#ffffff+17,d3d3d3+100 */
    background: rgb(255, 255, 255);
    /* Old browsers */
    background: -moz-linear-gradient(-45deg, rgba(255, 255, 255, 1) 17%, rgba(211, 211, 211, 1) 100%);
    /* FF3.6-15 */
    background: -webkit-linear-gradient(-45deg, rgba(255, 255, 255, 1) 17%, rgba(211, 211, 211, 1) 100%);
    /* Chrome10-25,Safari5.1-6 */
    background: linear-gradient(135deg, rgba(255, 255, 255, 1) 17%, rgba(211, 211, 211, 1) 100%);
    /* W3C, IE10+, FF16+, Chrome26+, Opera12+, Safari7+ */
    filter: progid: DXImageTransform.Microsoft.gradient( startColorstr='#ffffff', endColorstr='#d3d3d3', GradientType=1);
    /* IE6-9 fallback on horizontal gradient */
    pointer-events: none;
    top: 0;
    left: 0;
    z-index: 0;
}

.dropdown-list-row-bg-alt {
    width: 100%;
    height: 100%;
    position: absolute;
    /* Permalink - use to edit and share this gradient: http://colorzilla.com/gradient-editor/#ff5005+0,ffb76b+100 */
    background: rgb(255, 80, 5);
    /* Old browsers */
    background: -moz-linear-gradient(-45deg, rgba(255, 80, 5, 1) 0%, rgba(255, 183, 107, 1) 100%);
    /* FF3.6-15 */
    background: -webkit-linear-gradient(-45deg, rgba(255, 80, 5, 1) 0%, rgba(255, 183, 107, 1) 100%);
    /* Chrome10-25,Safari5.1-6 */
    background: linear-gradient(135deg, rgba(255, 80, 5, 1) 0%, rgba(255, 183, 107, 1) 100%);
    /* W3C, IE10+, FF16+, Chrome26+, Opera12+, Safari7+ */
    filter: progid: DXImageTransform.Microsoft.gradient( startColorstr='#ff5005', endColorstr='#ffb76b', GradientType=1);
    /* IE6-9 fallback on horizontal gradient */
    top: 0;
    left: 0;
    opacity: 0;
    z-index: 1;
}

.dropdown-list-row-text {
    width: calc(100% - 50px);
    height: 100px;
    position: absolute;
    line-height: 100px;
    text-align: left;
    font-family: 'Open Sans', sans-serif;
    font-size: 40px;
    font-weight: 100;
    padding: 0 25px;
    pointer-events: none;
    top: 0;
    left: 0;
    z-index: 0;
}

.dropdown-list-row-text-alt {
    width: calc(100% - 50px);
    height: 100%;
    position: absolute;
    line-height: 100px;
    text-align: left;
    font-family: 'Open Sans', sans-serif;
    font-size: 40px;
    font-weight: 100;
    padding: 0 25px;
    pointer-events: none;
    color: white;
    top: 0;
    left: 0;
    z-index: 20;
}

.with-sub > .dropdown-list-row-icon-container {
    opacity: 1;
}

.without-sub > .dropdown-list-row-icon-container {
    opacity: 0;
}

.with-sub > .dropdown-list-row-plus-black {
    opacity: 0.1;
}

.with-sub > .dropdown-list-row-plus-orange {
    opacity: 0;
}

.without-sub > .dropdown-list-row-plus-black {
    opacity: 0;
}

.without-sub > .dropdown-list-row-plus-orange {
    opacity: 0;
}

.dropdown-list-row-icon-container {
    width: 75px;
    height: 100px;
    position: absolute;
    overflow: hidden;
    pointer-events: none;
    top: 0;
    right: 0;
    z-index: 2;
}

.dropdown-list-row-plus-white,
.dropdown-list-row-minus-white {
    width: 50px;
    height: 50px;
    position: absolute;
    pointer-events: none;
    top: 25px;
    right: 25px;
}

.dropdown-list-row-plus-black,
.dropdown-list-row-plus-orange {
    width: 50px;
    height: 50px;
    position: absolute;
    pointer-events: none;
    top: 25px;
    right: 25px;
    z-index: 1;
}

.dropdown-list-row-plus-black {
    opacity: 0;
}

.dropdown-list-row-plus-white {
    z-index: 0;
}

.dropdown-list-row-minus-white {
    z-index: 0;
}

.dropdown-list-sub {
    width: 100%;
    height: auto;
    min-height: 100px;
    position: absolute;
    pointer-events: none;
    top: 0;
    left: 100%;
    z-index: 5;
}

.dropdown-list-row-sub {
    width: 100%;
    height: 100px;
    position: relative;
    float: left;
}

.dropdown-list-row-sub-bg-alt-container {
    width: 100%;
    height: 100px;
    position: absolute;
    overflow: hidden;
    pointer-events: none;
    top: 0;
    left: 0;
    z-index: 1;
}

.dropdown-list-row-sub-bg {
    width: 100%;
    height: 100px;
    position: absolute;
    /* Permalink - use to edit and share this gradient: http://colorzilla.com/gradient-editor/#ffffff+17,d3d3d3+100 */
    background: rgb(255, 255, 255);
    /* Old browsers */
    background: -moz-linear-gradient(-45deg, rgba(255, 255, 255, 1) 17%, rgba(211, 211, 211, 1) 100%);
    /* FF3.6-15 */
    background: -webkit-linear-gradient(-45deg, rgba(255, 255, 255, 1) 17%, rgba(211, 211, 211, 1) 100%);
    /* Chrome10-25,Safari5.1-6 */
    background: linear-gradient(135deg, rgba(255, 255, 255, 1) 17%, rgba(211, 211, 211, 1) 100%);
    /* W3C, IE10+, FF16+, Chrome26+, Opera12+, Safari7+ */
    filter: progid: DXImageTransform.Microsoft.gradient( startColorstr='#ffffff', endColorstr='#d3d3d3', GradientType=1);
    /* IE6-9 fallback on horizontal gradient */
    pointer-events: none;
    top: 0;
    left: 0;
    z-index: 0;
}

.dropdown-list-row-sub-bg-alt {
    width: 100%;
    height: 100%;
    position: absolute;
    /* Permalink - use to edit and share this gradient: http://colorzilla.com/gradient-editor/#ff5005+0,ffb76b+100 */
    background: rgb(255, 80, 5);
    /* Old browsers */
    background: -moz-linear-gradient(-45deg, rgba(255, 80, 5, 1) 0%, rgba(255, 183, 107, 1) 100%);
    /* FF3.6-15 */
    background: -webkit-linear-gradient(-45deg, rgba(255, 80, 5, 1) 0%, rgba(255, 183, 107, 1) 100%);
    /* Chrome10-25,Safari5.1-6 */
    background: linear-gradient(135deg, rgba(255, 80, 5, 1) 0%, rgba(255, 183, 107, 1) 100%);
    /* W3C, IE10+, FF16+, Chrome26+, Opera12+, Safari7+ */
    filter: progid: DXImageTransform.Microsoft.gradient( startColorstr='#ff5005', endColorstr='#ffb76b', GradientType=1);
    /* IE6-9 fallback on horizontal gradient */
    top: 0;
    left: 0;
    opacity: 0;
    z-index: 1;
}

.dropdown-list-row-sub-text {
    width: calc(100% - 50px);
    height: 100px;
    position: absolute;
    line-height: 100px;
    text-align: left;
    font-family: 'Open Sans', sans-serif;
    font-size: 40px;
    font-weight: 100;
    padding: 0 25px;
    pointer-events: none;
    top: 0;
    left: 0;
    z-index: 0;
}

.dropdown-list-row-sub-text-alt {
    width: calc(100% - 50px);
    height: 100%;
    position: absolute;
    line-height: 100px;
    text-align: left;
    font-family: 'Open Sans', sans-serif;
    font-size: 40px;
    font-weight: 100;
    padding: 0 25px;
    pointer-events: none;
    color: white;
    top: 0;
    left: 0;
    z-index: 20;
}
              
            
!

JS

              
                var container = document.getElementById('container');
var dropdownContainer = document.getElementById('dropdown-container');
var dropdownPreview = document.getElementById('dropdown-preview');
var dropdownPreviewBackground = document.getElementById('dropdown-preview-bg');
var dropdownPreviewBackgroundAlt = document.getElementById('dropdown-preview-bg-alt');
var dropdownPreviewText = document.getElementById('dropdown-preview-text');
var dropdownPreviewTextAlt = document.getElementById('dropdown-preview-text-alt');
var dropdownPreviewArrowDown = document.getElementById('dropdown-preview-arrow-down');
var dropdownPreviewArrowDownAlt = document.getElementById('dropdown-preview-arrow-down-alt');
var dropdownList = document.getElementById('dropdown-list');
var dropdownListRow = document.getElementsByClassName('dropdown-list-row');
var dropdownListRowWithSub = document.getElementsByClassName('with-sub');
var dropdownListRowWithoutSub = document.getElementsByClassName('without-sub');
var dropdownListRowBackground = document.getElementsByClassName('dropdown-list-row-bg');
var dropdownListRowBackgroundAlt = document.getElementsByClassName('dropdown-list-row-bg-alt');
var dropdownListRowText = document.getElementsByClassName('dropdown-list-row-text');
var dropdownListRowTextAlt = document.getElementsByClassName('dropdown-list-row-text-alt');
var dropdownListSub = document.getElementsByClassName('dropdown-list-sub');
var dropdownListRowSub = document.getElementsByClassName('dropdown-list-row-sub');
var dropdownListRowSubBackground = document.getElementsByClassName('dropdown-list-row-sub-bg');
var dropdownListRowSubBackgroundAlt = document.getElementsByClassName('dropdown-list-row-sub-bg-alt');
var dropdownListRowSubText = document.getElementsByClassName('dropdown-list-row-sub-text');
var dropdownListRowSubTextAlt = document.getElementsByClassName('dropdown-list-row-sub-text-alt');

//jQuery Selectors
var $container = $('#container');
var $dropdownContainer = $('#dropdown-container');
var $dropdownPreview = $('#dropdown-preview');
var $dropdownPreviewBackground = $('#dropdown-preview-bg');
var $dropdownPreviewBackgroundAlt = $('#dropdown-preview-bg-alt');
var $dropdownPreviewText = $('#dropdown-preview-text');
var $dropdownPreviewTextAlt = $('#dropdown-preview-text-alt');
var $dropdownPreviewArrowDown = $('#dropdown-preview-arrow-down');
var $dropdownPreviewArrowDownAlt = $('#dropdown-preview-arrow-down-alt');
var $dropdownList = $('#dropdown-list');
var $dropdownListRow = $('.dropdown-list-row');
var $dropdownListRowWithSub = $('.with-sub');
var $dropdownListRowWithoutSub = $('.without-sub');
var $dropdownListRowBackground = $('.dropdown-list-row-bg');
var $dropdownListRowBackgroundAlt = $('.dropdown-list-row-bg-alt');
var $dropdownListRowText = $('.dropdown-list-row-text');
var $dropdownListRowTextAlt = $('.dropdown-list-row-text-alt');

var $dropdownListRowPlusBlack = $('.dropdown-list-row-plus-black');
var $dropdownListRowPlusOrange = $('.dropdown-list-row-plus-orange');
var $dropdownListRowPlusWhite = $('.dropdown-list-row-plus-white');
var $dropdownListRowMinusWhite = $('.dropdown-list-row-minus-white');
var $dropdownListRowOverlayIcons = $('.dropdown-list-row-overlay-icons');

var $activeSub = $('.active-sub');
var $dropdownListSub = $('.dropdown-list-sub');
var $dropdownListRowSub = $('.dropdown-list-row-sub');
var $dropdownListRowSubBackground = $('.dropdown-list-row-sub-bg');
var $dropdownListRowSubBackgroundAlt = $('.dropdown-list-row-sub-bg-alt');
var $dropdownListRowSubText = $('.dropdown-list-row-sub-text');
var $dropdownListRowSubTextAlt = $('.dropdown-list-row-sub-text-alt');

var $thisDropdownListSub = $(this).find('.dropdown-list-sub');
var $thisDropdownListRowSub = $(this).find('.dropdown-list-row-sub');
var $thisDropdownListRowSubBackground = $(this).find('.dropdown-list-row-sub-bg');
var $thisDropdownListRowSubBackgroundAlt = $(this).find('.dropdown-list-row-sub-bg-alt');
var $thisDropdownListRowSubText = $(this).find('.dropdown-list-row-sub-text');
var $thisDropdownListRowSubTextAlt = $(this).find('.dropdown-list-row-sub-text-alt');

var dropdownContainerCurrentHeight = 100;

var dropdownHoverDuration = 0.5;
var dropdownTextHoverDuration = 0.5;
var dropdownHoverDurationTextStart = 0.5;
var dropdownHoverDurationTextEnd = 0.25;
var dropdownHoverDurationArrowStart = 0.5;
var dropdownHoverDurationArrowEnd = 0.25;
var dropdownListRowTextDuration = 0.5;
var dropdownArrowHoverDuration = 0.5;
var dropdownHoverEase = Expo.easeOut;
var dropdownTextHoverEaseStart = Expo.easeOut;
var dropdownTextHoverEaseEnd = Expo.easeOut;
var dropdownListRowTextHoverEaseStart = Expo.easeOut;
var dropdownListRowTextHoverEaseEnd = Expo.easeOut;
var dropdownArrowHoverEaseStart = Expo.easeOut;
var dropdownArrowHoverEaseEnd = Linear.easeNone;
var dropdownArrowClickEase = Expo.easeOut;
var dropdownListRowEaseStart = Back.easeOut;
var dropdownListRowEaseEnd = Expo.easeIn;

var dropdownActive = false;
var dropdownSubActive = false;
var subInMotion = false;

var click = {
    dropdown: {
        preview: function () {
            if (!dropdownActive) {
                dropdownContainerCurrentHeight = 600;
                dropdownActive = true;
                TweenMax.set(dropdownContainer, {
                    y: ($container.height() / 2) - ($dropdownPreview.height() / 2)
                });
                TweenMax.to(dropdownContainer, 0.5, {
                    y: ($container.height() / 2) - ($dropdownContainer.height() / 2),
                    ease: Back.easeOut
                }, 0);
                TweenMax.to(dropdownList, 0.5 + (0.05 * $dropdownListRow.length), {
                    pointerEvents: 'none',
                    overflow: 'visible',
                    onComplete: function () {
                        TweenMax.set(dropdownList, {
                            pointerEvents: 'initial',
                            cursor: 'pointer'
                        });
                    }
                }, 0);
                TweenMax.set($dropdownPreviewArrowDown, {
                    scaleY: 1
                });
                TweenMax.to($dropdownPreviewArrowDown, dropdownArrowHoverDuration, {
                    scaleY: -1,
                    ease: Quart.easeOut
                }, 0);
                TweenMax.set($dropdownPreviewArrowDownAlt, {
                    y: 0,
                    scaleY: 1
                });
                TweenMax.to($dropdownPreviewArrowDownAlt, dropdownArrowHoverDuration, {
                    scaleY: -1,
                    ease: Quart.easeOut
                }, 0);
                TweenMax.set(dropdownListRow, {
                    opacity: 0,
                    y: 0,
                    z: 300
                });
                TweenMax.staggerTo(dropdownListRow, 0.5, {
                    opacity: 1,
                    y: 0,
                    z: 0,
                    ease: dropdownListRowEaseStart
                }, 0.1);
            } else {
                dropdownContainerCurrentHeight = 100;
                if (!dropdownSubActive) {
                    TweenMax.to(dropdownContainer, 0.75, {
                        bezier: {
                            type: "cubic",
                            values: [{
                                x: 0,
                                y: ($container.height() / 2) - (600 / 2),
                                rotation:0
                        }, {
                                x: -250,
                                y: ($container.height() / 2) - (400 / 2),
                                rotation:45
                        }, {
                                x: -125,
                                y: ($container.height() / 2) - (200 / 2),
                                rotation:-45
                        }, {
                                x: 0,
                                y: ($container.height() / 2) - (100 / 2),
                                rotation:0
                        }]
                        },
                        ease: Quad.easeInOut
                    }, 0);
                } else {
                    TweenMax.to(dropdownContainer, 0.75, {
                        bezier: {
                            type: "cubic",
                            values: [{
                                x: -250,
                                y: ($container.height() / 2) - (600 / 2),
                                rotation:0
                        }, {
                                x: -125,
                                y: ($container.height() / 2),
                                rotation:-45
                        }, {
                                x: -50,
                                y: ($container.height() / 2),
                                rotation:45
                        }, {
                                x: 0,
                                y: ($container.height() / 2) - (100 / 2),
                                rotation:0
                        }]
                        },
                        ease: Quad.easeInOut
                    }, 0);
                    dropdownSubActive = false;
                }
                TweenMax.to(dropdownContainer, 0.5, {
                    pointerEvents: 'none',
                    onComplete: function () {
                        TweenMax.to(dropdownPreviewBackgroundAlt, dropdownHoverDuration, {
                            x: 500,
                            ease: dropdownHoverEase
                        }, 0);
                        TweenMax.set(dropdownPreviewTextAlt, {
                            y: 0
                        });
                        TweenMax.to(dropdownPreviewTextAlt, dropdownHoverDuration, {
                            opacity: 0,
                            ease: dropdownHoverEase
                        }, 0);
                        TweenMax.to(dropdownPreviewArrowDownAlt, dropdownHoverDuration, {
                            opacity: 0,
                            ease: Expo.easeOut,
                            onComplete: function () {
                                TweenMax.set(dropdownContainer, {
                                    pointerEvents: 'initial'
                                });
                                dropdownActive = false;
                            }
                        }, 0);
                    }
                }, 0);
                if ($dropdownListRowWithSub.hasClass('active-sub')) {
                    $dropdownListRowWithSub.removeClass('active-sub');
                    TweenMax.to($dropdownListRowPlusWhite, 0.5, {
                        opacity: 0
                    }, 0);
                    TweenMax.to($dropdownListRowMinusWhite, 0.5, {
                        opacity: 0,
                        onComplete: function () {
                            TweenMax.set($dropdownListRowPlusWhite, {
                                x: 75,
                                rotation: 0,
                                opacity: 0
                            });
                            TweenMax.set($dropdownListRowMinusWhite, {
                                x: 75,
                                rotation: 0,
                                opacity: 0
                            });
                        }
                    }, 0);
                    TweenMax.staggerTo($activeSub.find('.dropdown-list-row-sub'), 0.25, {
                        opacity: 0,
                        y: -300,
                        ease: dropdownListRowEaseEnd
                    }, 0.05);
                    TweenMax.set($activeSub.find('.dropdown-list-row-sub'), {
                        opacity: 0,
                        y: 0,
                        z: 0,
                        delay: 0.25 + ($activeSub.find('.dropdown-list-row-sub').length * 0.05)
                    });
                    TweenMax.to($dropdownListSub, 0.5 + (($dropdownListRowSub.length - 1) * 0.1), {
                        pointerEvents: 'none',
                        zIndex: 5,
                        onComplete: function () {
                            subInMotion = false;
                        }
                    }, 0);
                    TweenMax.to($dropdownListRowWithSub.find('.dropdown-list-row-bg-alt'), dropdownHoverDuration, {
                        x: 500,
                        ease: dropdownHoverEase
                    }, 0);
                    TweenMax.to($dropdownListRowWithSub.find('.dropdown-list-row-text-alt'), 0, {
                        opacity: 0,
                        ease: dropdownListRowTextHoverEaseEnd
                    }, 0);
                }
                TweenMax.set(dropdownList, {
                    pointerEvents: 'none',
                    cursor: 'initial'
                });
                TweenMax.set($dropdownPreviewArrowDown, {
                    scaleY: -1
                });
                TweenMax.to($dropdownPreviewArrowDown, dropdownHoverDuration, {
                    scaleY: 1,
                    ease: Quart.easeOut
                }, 0);
                TweenMax.set($dropdownPreviewArrowDownAlt, {
                    scaleY: -1,
                    y: 0
                });
                TweenMax.to($dropdownPreviewArrowDownAlt, dropdownHoverDuration, {
                    scaleY: 1,
                    ease: Quart.easeOut
                }, 0);
                TweenMax.set(dropdownListRow, {
                    opacity: 1,
                    y: 0,
                    z: 0
                });
                TweenMax.staggerTo(dropdownListRow, 0.25, {
                    opacity: 0,
                    y: -300,
                    ease: dropdownListRowEaseEnd
                }, 0.05, allComplete);


                function allComplete() {
                    TweenMax.set($dropdownList, {
                        overflow: 'hidden'
                    });
                    console.log('hey');
                }

                TweenMax.set(dropdownListRow, {
                    opacity: 0,
                    y: 0,
                    z: 0,
                    delay: 0.25 + (0.05 * ($dropdownListRow.length - 1))
                });
            }
        },
        list: {
            item: {
                sub: function () {
                    if ($(this).hasClass('with-sub')) {
                        if (!subInMotion) {
                            subInMotion = true;
                            if (!($(this).hasClass('active-sub'))) {
                                dropdownSubActive = true;
                                TweenMax.to(dropdownContainer, 0.5, {
                                    x: -250,
                                    ease: Back.easeOut
                                }, 0);
                                TweenMax.to($(this).siblings('.active-sub').find('.dropdown-list-sub'), 0, {
                                    pointerEvents: 'none',
                                    zIndex: 5
                                }, 0);
                                TweenMax.to($(this).siblings('.active-sub').find('.dropdown-list-row-plus-white'), 0.5, {
                                    opacity: 0
                                }, 0);
                                TweenMax.to($(this).siblings('.active-sub').find('.dropdown-list-row-minus-white'), 0.5, {
                                    opacity: 0
                                }, 0);
                                TweenMax.set($(this).siblings('.active-sub').find('.dropdown-list-row-sub'), {
                                    opacity: 1,
                                    y: 0,
                                    z: 0
                                });
                                TweenMax.staggerTo($(this).siblings('.active-sub').find('.dropdown-list-row-sub'), 0.25, {
                                    opacity: 0,
                                    y: -300,
                                    ease: dropdownListRowEaseEnd
                                }, 0.05);
                                TweenMax.set($(this).siblings('.active-sub').find('.dropdown-list-row-sub'), {
                                    opacity: 0,
                                    y: 0,
                                    z: 0,
                                    delay: 0.25 + (0.05 * ($dropdownListRow.length - 1))
                                });
                                TweenMax.to($(this).siblings('.active-sub').find('.dropdown-list-row-bg-alt'), dropdownHoverDuration, {
                                    x: 500,
                                    ease: dropdownHoverEase
                                }, 0);
                                TweenMax.to($(this).siblings('.active-sub').find('.dropdown-list-row-text-alt'), 0, {
                                    opacity: 0,
                                    ease: dropdownListRowTextHoverEaseEnd
                                }, 0);
                                $(this).siblings('.active-sub').removeClass('active-sub');
                                $(this).addClass('active-sub');
                                $activeSub = $('.active-sub');
                                TweenMax.set($(this).find('.dropdown-list-row-minus-white'), {
                                    x: 0,
                                    rotation: 0,
                                    opacity: 0
                                });
                                TweenMax.to($(this).find('.dropdown-list-row-plus-white'), 0.5, {
                                    opacity: 0
                                }, 0);
                                TweenMax.to($(this).find('.dropdown-list-row-minus-white'), 0.5, {
                                    opacity: 1
                                }, 0);
                                TweenMax.set($(this).find('.dropdown-list-row-sub'), {
                                    opacity: 0,
                                    y: 0,
                                    z: 300
                                });
                                TweenMax.set($(this).find('.dropdown-list-sub'), {
                                    opacity: 1
                                });
                                TweenMax.staggerTo($(this).find('.dropdown-list-row-sub'), 0.5, {
                                    opacity: 1,
                                    y: 0,
                                    z: 0,
                                    ease: dropdownListRowEaseStart
                                }, 0.1);
                                TweenMax.to($(this).find('.dropdown-list-sub'), 0.5 + (($(this).find('.dropdown-list-row-sub').length - 1) * 0.1), {
                                    pointerEvents: 'none',
                                    zIndex: 10,
                                    onComplete: function () {
                                        subInMotion = false;
                                    }
                                }, 0);
                                TweenMax.to($(this).find('.dropdown-list-sub'), 0, {
                                    pointerEvents: 'initial',
                                    delay: 0.5 + (($(this).find('.dropdown-list-row-sub').length - 1) * 0.1)
                                }, 0);
                            } else {
                                dropdownSubActive = false;
                                TweenMax.to(dropdownContainer, 0.5, {
                                    x: 0,
                                    ease: Back.easeOut
                                }, 0);
                                TweenMax.to($(this).find('.dropdown-list-row-plus-white'), 0.5, {
                                    opacity: 1
                                }, 0);
                                TweenMax.to($(this).find('.dropdown-list-row-minus-white'), 0.5, {
                                    opacity: 0,
                                    onComplete: function () {
                                        TweenMax.set($(this).find('.dropdown-list-row-minus-white'), {
                                            x: 75,
                                            rotation: 0,
                                            opacity: 0
                                        });
                                    }
                                }, 0);
                                $(this).removeClass('active-sub');
                                TweenMax.set($(this).find('.dropdown-list-row-sub'), {
                                    opacity: 1,
                                    y: 0,
                                    z: 0
                                });
                                TweenMax.staggerTo($(this).find('.dropdown-list-row-sub'), 0.25, {
                                    opacity: 0,
                                    y: -300,
                                    ease: dropdownListRowEaseEnd
                                }, 0.05);
                                TweenMax.set($(this).find('.dropdown-list-row-sub'), {
                                    opacity: 0,
                                    y: 0,
                                    z: 0,
                                    delay: 0.25 + (0.05 * ($dropdownListRow.length - 1))
                                });
                                TweenMax.to($(this).find('.dropdown-list-sub'), 0.5 + (($(this).find('.dropdown-list-row-sub').length - 1) * 0.1), {
                                    pointerEvents: 'none',
                                    onComplete: function () {
                                        subInMotion = false;
                                    }
                                }, 0);
                            }
                        }
                    }
                }
            }
        }
    }
}

var hover = {
    over: {
        dropdown: {
            preview: function () {
                if (!dropdownActive) {
                    TweenMax.set(dropdownPreviewBackgroundAlt, {
                        x: -500
                    });
                    TweenMax.to(dropdownPreviewBackgroundAlt, dropdownHoverDuration, {
                        x: 0,
                        ease: dropdownHoverEase
                    }, 0);
                    TweenMax.set(dropdownPreviewTextAlt, {
                        opacity: 0,
                        x: 100
                    });
                    TweenMax.to(dropdownPreviewTextAlt, dropdownHoverDurationTextStart, {
                        opacity: 1,
                        x: 0,
                        ease: dropdownTextHoverEaseStart,
                        delay: 0.05
                    }, 0);
                    TweenMax.set(dropdownPreviewArrowDownAlt, {
                        opacity: 0,
                        x: 100
                    });
                    TweenMax.to(dropdownPreviewArrowDownAlt, dropdownHoverDurationArrowStart, {
                        opacity: 1,
                        x: 0,
                        ease: dropdownArrowHoverEaseStart,
                        delay: 0.15
                    }, 0);
                }
            },
            rowWithSub: function () {
                if (!($(this).hasClass('active-sub'))) {
                    TweenMax.set($(this).find('.dropdown-list-row-plus-white'), {
                        opacity: 0,
                        x: 100,
                        rotation: 720
                    });
                    TweenMax.to($(this).find('.dropdown-list-row-plus-white'), dropdownHoverDurationArrowStart, {
                        x: 0,
                        rotation: 0,
                        ease: dropdownArrowHoverEaseStart,
                        delay: 0.15
                    }, 0);
                    TweenMax.to($(this).find('.dropdown-list-row-plus-white'), dropdownHoverDurationArrowStart, {
                        opacity: 1,
                        ease: dropdownArrowHoverEaseStart,
                        delay: 0.15
                    }, 0);
                }
            },
            row: function () {
                if (!($(this).hasClass('active-sub'))) {
                    TweenMax.set($(this).find('.dropdown-list-row-bg-alt'), {
                        x: -500
                    });
                    TweenMax.to($(this).find('.dropdown-list-row-bg-alt'), dropdownHoverDuration, {
                        x: 0,
                        ease: dropdownHoverEase
                    }, 0);
                    TweenMax.set($(this).find('.dropdown-list-row-text-alt'), {
                        opacity: 0,
                        x: 100
                    });
                    TweenMax.to($(this).find('.dropdown-list-row-text-alt'), dropdownListRowTextDuration, {
                        opacity: 1,
                        x: 0,
                        ease: dropdownListRowTextHoverEaseStart
                    }, 0);
                }
            },
            rowSub: function () {
                TweenMax.set($(this).find('.dropdown-list-row-sub-bg-alt'), {
                    x: -500
                });
                TweenMax.to($(this).find('.dropdown-list-row-sub-bg-alt'), dropdownHoverDuration, {
                    x: 0,
                    ease: dropdownHoverEase
                }, 0);
                TweenMax.set($(this).find('.dropdown-list-row-sub-text-alt'), {
                    opacity: 0,
                    x: 100
                });
                TweenMax.to($(this).find('.dropdown-list-row-sub-text-alt'), dropdownListRowTextDuration, {
                    opacity: 1,
                    x: 0,
                    ease: dropdownListRowTextHoverEaseStart
                }, 0);
            }
        }
    },
    out: {
        dropdown: {
            preview: function () {
                if (!dropdownActive) {
                    TweenMax.to(dropdownPreviewBackgroundAlt, dropdownHoverDuration, {
                        x: 500,
                        ease: dropdownHoverEase
                    }, 0);
                    TweenMax.set(dropdownPreviewTextAlt, {
                        x: 0
                    });
                    TweenMax.to(dropdownPreviewTextAlt, dropdownHoverDurationTextEnd, {
                        opacity: 0,
                        ease: dropdownTextHoverEaseEnd,
                        delay: 0.05
                    }, 0);
                    TweenMax.set(dropdownPreviewArrowDownAlt, {
                        x: 0
                    });
                    TweenMax.to(dropdownPreviewArrowDownAlt, dropdownHoverDurationArrowEnd, {
                        opacity: 0,
                        ease: dropdownArrowHoverEaseEnd
                    }, 0);
                    TweenMax.to(dropdownPreviewArrowDownAlt, 0, {
                        opacity: 0,
                        delay: 0.15
                    }, 0);
                }
            },
            rowWithSub: function () {
                if (!($(this).hasClass('active-sub'))) {
                    TweenMax.to($(this).find('.dropdown-list-row-plus-white'), dropdownHoverDurationArrowEnd, {
                        opacity: 0,
                        ease: Linear.easeNone
                    }, 0);
                    TweenMax.to($(this).find('.dropdown-list-row-plus-white'), 0, {
                        opacity: 0,
                        delay: 0.15
                    }, 0);
                }
            },
            row: function () {
                if (!($(this).hasClass('active-sub'))) {
                    TweenMax.to($(this).find('.dropdown-list-row-bg-alt'), dropdownHoverDuration, {
                        x: 500,
                        ease: dropdownHoverEase
                    }, 0);
                    TweenMax.to($(this).find('.dropdown-list-row-text-alt'), 0, {
                        opacity: 0,
                        ease: dropdownListRowTextHoverEaseEnd
                    }, 0);
                }
            },
            rowSub: function () {
                TweenMax.to($(this).find('.dropdown-list-row-sub-bg-alt'), dropdownHoverDuration, {
                    x: 500,
                    ease: dropdownHoverEase
                }, 0);
                TweenMax.to($(this).find('.dropdown-list-row-sub-text-alt'), 0, {
                    opacity: 0,
                    ease: dropdownListRowTextHoverEaseEnd
                }, 0);
            }
        }
    }
}

TweenMax.set(container, {
    perspective: 800,
    perspectiveOrigin: 'center',
    transformStyle: 'flat',
    userSelect: 'none',
    opacity: 1
});

TweenMax.set(dropdownContainer, {
    transformOrigin: 'center',
    opacity: 1,
    height: $dropdownPreview.height() + $dropdownList.height(),
    y: ($container.height() / 2) - (dropdownContainerCurrentHeight / 2)
});

TweenMax.set(dropdownPreview, {
    perspective: 800,
    perspectiveOrigin: 'center',
    transformStyle: 'flat',
    transformOrigin: 'center'
});

TweenMax.set(dropdownPreviewBackgroundAlt, {
    transformOrigin: 'center',
    opacity: 1,
    x: -500
});

TweenMax.set(dropdownListRowBackgroundAlt, {
    transformOrigin: 'center',
    opacity: 1,
    x: -500
});

TweenMax.set(dropdownPreviewBackground, {
    transformOrigin: 'center'
});

TweenMax.set(dropdownListRowTextAlt, {
    transformOrigin: 'center',
    x: 100,
    opacity: 0
});

TweenMax.set(dropdownListRowText, {
    transformOrigin: 'center'
});

TweenMax.set(dropdownPreviewTextAlt, {
    transformOrigin: 'center',
    x: 100,
    opacity: 0
});

TweenMax.set(dropdownPreviewText, {
    transformOrigin: 'center'
});

TweenMax.set($dropdownPreviewArrowDown, {
    transformOrigin: 'center',
    scaleY: 1
});

TweenMax.set($dropdownPreviewArrowDownAlt, {
    transformOrigin: 'center',
    x: 100,
    scaleY: 1,
    opacity: 0
});

TweenMax.set($dropdownPreviewArrowDown, {
    transformOrigin: 'center',
    scaleY: 1
});

TweenMax.set(dropdownList, {
    perspective: 800,
    perspectiveOrigin: 'center',
    transformStyle: 'flat',
    transformOrigin: 'center',
    overflow: 'hidden'
});

TweenMax.set(dropdownListRow, {
    transformOrigin: 'center',
    opacity: 0
});

TweenMax.set(dropdownListRowBackground, {
    transformOrigin: 'center'
});

TweenMax.set($dropdownListRowOverlayIcons, {
    x: 75
});

TweenMax.set($dropdownListRowPlusWhite, {
    opacity: 1
});

TweenMax.set($dropdownListRowMinusWhite, {
    opacity: 0
});

TweenMax.set(dropdownListSub, {
    perspective: 800,
    perspectiveOrigin: 'center',
    transformStyle: 'flat',
    transformOrigin: 'center'
});

TweenMax.set(dropdownListRowSub, {
    transformOrigin: 'center',
    opacity: 0,
    y: 0,
    z: 300
});

TweenMax.set(dropdownListRowSubBackground, {
    transformOrigin: 'center'
});

TweenMax.set(dropdownListRowSubTextAlt, {
    transformOrigin: 'center',
    x: 100,
    opacity: 0
});

TweenMax.set(dropdownListRowSubText, {
    transformOrigin: 'center'
});

TweenMax.set(dropdownListRowSubBackgroundAlt, {
    transformOrigin: 'center',
    opacity: 1,
    x: -500
});

/*document.addEventListener('dblclick', hover.over.dropdown.preview, false);
document.addEventListener('dblclick', click.dropdown.preview, false);*/
dropdownPreview.addEventListener('click', click.dropdown.preview, false);
dropdownPreview.addEventListener('mouseover', hover.over.dropdown.preview, false);
dropdownPreview.addEventListener('mouseout', hover.out.dropdown.preview, false);

for (i = 0; i < dropdownListRow.length; i++) {
    dropdownListRow[i].addEventListener('click', click.dropdown.list.item.sub, false);
    dropdownListRow[i].addEventListener('mouseover', hover.over.dropdown.row, false);
    dropdownListRow[i].addEventListener('mouseout', hover.out.dropdown.row, false);
}

for (i = 0; i < dropdownListRowWithSub.length; i++) {
    dropdownListRowWithSub[i].addEventListener('mouseover', hover.over.dropdown.rowWithSub, false);
    dropdownListRowWithSub[i].addEventListener('mouseout', hover.out.dropdown.rowWithSub, false);
}

for (i = 0; i < dropdownListRowSub.length; i++) {
    dropdownListRowSub[i].addEventListener('mouseover', hover.over.dropdown.rowSub, false);
    dropdownListRowSub[i].addEventListener('mouseout', hover.out.dropdown.rowSub, false);
}

$(window).resize(function() {
    TweenMax.set($dropdownContainer, {
        y: ($container.height() / 2) - (dropdownContainerCurrentHeight / 2)
    });
});
              
            
!
999px

Console