首頁面index.html：
<code><!DOCTYPE html></code>
<code><</code><code>html</code><code>></code>
<code><</code><code>head</code><code>></code>
<code> </code><code><</code><code>meta</code> <code>charset</code><code>=</code><code>"UTF-8"</code><code>></code>
<code> </code><code><</code><code>title</code><code>>CSS3/Javascript 實作簡單下來菜單</</code><code>title</code><code>></code>
<code> </code><code><</code><code>link</code> <code>rel</code><code>=</code><code>"stylesheet"</code> <code>href</code><code>=</code><code>"css/style.css"</code> <code>media</code><code>=</code><code>"screen"</code> <code>type</code><code>=</code><code>"text/css"</code> <code>/></code>
<code></</code><code>head</code><code>></code>
<code><</code><code>body</code><code>></code>
<code> </code><code><</code><code>div</code> <code>class</code><code>=</code><code>"container"</code><code>></code>
<code> </code><code><</code><code>h1</code> <code>class</code><code>=</code><code>"title"</code><code>>Dropdown Menu</</code><code>h1</code><code>></code>
<code> </code><code><</code><code>ul</code><code>></code>
<code> </code><code><</code><code>li</code> <code>class</code><code>=</code><code>"dropdown"</code><code>></code>
<code> </code><code><</code><code>a</code> <code>href</code><code>=</code><code>"#"</code> <code>data-toggle</code><code>=</code><code>"dropdown"</code><code>>First Menu <</code><code>i</code> <code>class</code><code>=</code><code>"icon-arrow"</code><code>></</code><code>i</code><code>></</code><code>a</code><code>></code>
<code> </code><code><</code><code>ul</code> <code>class</code><code>=</code><code>"dropdown-menu"</code><code>></code>
<code> </code><code><</code><code>li</code><code>><</code><code>a</code> <code>href</code><code>=</code><code>"#"</code><code>>Home</</code><code>a</code><code>></</code><code>li</code><code>></code>
<code> </code><code><</code><code>li</code><code>><</code><code>a</code> <code>href</code><code>=</code><code>"#"</code><code>>About Us</</code><code>a</code><code>></</code><code>li</code><code>></code>
<code> </code><code><</code><code>li</code><code>><</code><code>a</code> <code>href</code><code>=</code><code>"#"</code><code>>Services</</code><code>a</code><code>></</code><code>li</code><code>></code>
<code> </code><code><</code><code>li</code><code>><</code><code>a</code> <code>href</code><code>=</code><code>"#"</code><code>>Contact</</code><code>a</code><code>></</code><code>li</code><code>></code>
<code> </code><code></</code><code>ul</code><code>></code>
<code> </code><code></</code><code>li</code><code>></code>
<code> </code><code><</code><code>a</code> <code>href</code><code>=</code><code>"#"</code> <code>data-toggle</code><code>=</code><code>"dropdown"</code><code>>Second Menu <</code><code>i</code> <code>class</code><code>=</code><code>"icon-arrow"</code><code>></</code><code>i</code><code>></</code><code>a</code><code>></code>
<code> </code><code><</code><code>a</code> <code>href</code><code>=</code><code>"#"</code> <code>data-toggle</code><code>=</code><code>"dropdown"</code><code>>Third Menu <</code><code>i</code> <code>class</code><code>=</code><code>"icon-arrow"</code><code>></</code><code>i</code><code>></</code><code>a</code><code>></code>
<code> </code><code></</code><code>ul</code><code>></code>
<code></</code><code>div</code><code>></code>
<code> </code><code><</code><code>script</code> <code>src</code><code>=</code><code>"js/index.js"</code><code>></</code><code>script</code><code>></code>
<code></</code><code>body</code><code>></code>
<code></</code><code>html</code><code>></code>
樣式表css/style.css：
<code>body {</code>
<code> </code><code>font-family</code><code>: </code><code>"Lato"</code><code>, </code><code>Helvetica</code><code>, </code><code>Arial</code><code>;</code>
<code> </code><code>font-size</code><code>: </code><code>16px</code><code>;</code>
<code>}</code>
<code>*, *:before, *:after {</code>
<code> </code><code>-webkit-border-sizing: border-box;</code>
<code> </code><code>-moz-border-sizing: border-box;</code>
<code> </code><code>border-sizing: border-box;</code>
<code>.container {</code>
<code> </code><code>width</code><code>: </code><code>350px</code><code>;</code>
<code> </code><code>margin</code><code>: </code><code>50px</code> <code>auto</code><code>;</code>
<code>.container > ul {</code>
<code> </code><code>list-style</code><code>: </code><code>none</code><code>;</code>
<code> </code><code>padding</code><code>: </code><code>0</code><code>;</code>
<code> </code><code>margin</code><code>: </code><code>0</code> <code>0</code> <code>20px</code> <code>0</code><code>;</code>
<code>.title {</code>
<code> </code><code>font-family</code><code>: </code><code>'Pacifico'</code><code>;</code>
<code> </code><code>font-weight</code><code>: norma;</code>
<code> </code><code>font-size</code><code>: </code><code>40px</code><code>;</code>
<code> </code><code>text-align</code><code>: </code><code>center</code><code>;</code>
<code> </code><code>line-height</code><code>: </code><code>1.4</code><code>;</code>
<code> </code><code>color</code><code>: </code><code>#2980b9</code><code>;</code>
<code>.dropdown a {</code>
<code> </code><code>text-decoration</code><code>: </code><code>none</code><code>;</code>
<code>.dropdown [data-toggle=</code><code>"dropdown"</code><code>] {</code>
<code> </code><code>position</code><code>: </code><code>relative</code><code>;</code>
<code> </code><code>display</code><code>: </code><code>block</code><code>;</code>
<code> </code><code>color</code><code>: </code><code>white</code><code>;</code>
<code> </code><code>background</code><code>: </code><code>#2980b9</code><code>;</code>
<code> </code><code>-moz-box-shadow: </code><code>0</code> <code>1px</code> <code>0</code> <code>#409ad5</code> <code>inset</code><code>, </code><code>0</code> <code>-1px</code> <code>0</code> <code>#20638f</code> <code>inset</code><code>;</code>
<code> </code><code>-webkit-box-shadow: </code><code>0</code> <code>1px</code> <code>0</code> <code>#409ad5</code> <code>inset</code><code>, </code><code>0</code> <code>-1px</code> <code>0</code> <code>#20638f</code> <code>inset</code><code>;</code>
<code> </code><code>box-shadow: </code><code>0</code> <code>1px</code> <code>0</code> <code>#409ad5</code> <code>inset</code><code>, </code><code>0</code> <code>-1px</code> <code>0</code> <code>#20638f</code> <code>inset</code><code>;</code>
<code> </code><code>text-shadow</code><code>: </code><code>0</code> <code>-1px</code> <code>0</code> <code>rgba(</code><code>0</code><code>, </code><code>0</code><code>, </code><code>0</code><code>, </code><code>0.3</code><code>);</code>
<code> </code><code>padding</code><code>: </code><code>10px</code><code>;</code>
<code>.dropdown [data-toggle=</code><code>"dropdown"</code><code>]:hover {</code>
<code> </code><code>background</code><code>: </code><code>#2c89c6</code><code>;</code>
<code>.dropdown .icon-arrow {</code>
<code> </code><code>position</code><code>: </code><code>absolute</code><code>;</code>
<code> </code><code>font-size</code><code>: </code><code>0.7em</code><code>;</code>
<code> </code><code>color</code><code>: </code><code>#fff</code><code>;</code>
<code> </code><code>top</code><code>: </code><code>14px</code><code>;</code>
<code> </code><code>right</code><code>: </code><code>10px</code><code>;</code>
<code>.dropdown .icon-arrow.open {</code>
<code> </code><code>-moz-transform: rotate(</code><code>-180</code><code>deg);</code>
<code> </code><code>-ms-transform: rotate(</code><code>-180</code><code>deg);</code>
<code> </code><code>-o-transform: rotate(</code><code>-180</code><code>deg);</code>
<code> </code><code>-webkit-transform: rotate(</code><code>-180</code><code>deg);</code>
<code> </code><code>transform: rotate(</code><code>-180</code><code>deg);</code>
<code> </code><code>-moz-transition: -moz-transform </code><code>0.6</code><code>s;</code>
<code> </code><code>-o-transition: -o-transform </code><code>0.6</code><code>s;</code>
<code> </code><code>-webkit-transition: -webkit-transform </code><code>0.6</code><code>s;</code>
<code> </code><code>transition: transform </code><code>0.6</code><code>s;</code>
<code>.dropdown .icon-arrow.close {</code>
<code> </code><code>-moz-transform: rotate(</code><code>0</code><code>deg);</code>
<code> </code><code>-ms-transform: rotate(</code><code>0</code><code>deg);</code>
<code> </code><code>-o-transform: rotate(</code><code>0</code><code>deg);</code>
<code> </code><code>-webkit-transform: rotate(</code><code>0</code><code>deg);</code>
<code> </code><code>transform: rotate(</code><code>0</code><code>deg);</code>
<code>.dropdown .icon-arrow:before {</code>
<code> </code><code>content</code><code>: </code><code>'\25BC'</code><code>;</code>
<code>.dropdown .dropdown-menu {</code>
<code> </code><code>max-height</code><code>: </code><code>0</code><code>;</code>
<code> </code><code>overflow</code><code>: </code><code>hidden</code><code>;</code>
<code> </code><code>margin</code><code>: </code><code>0</code><code>;</code>
<code>.dropdown .dropdown-menu li {</code>
<code>.dropdown .dropdown-menu li a {</code>
<code> </code><code>color</code><code>: </code><code>#6e6e6e</code><code>;</code>
<code> </code><code>background</code><code>: </code><code>#eeeeee</code><code>;</code>
<code> </code><code>-moz-box-shadow: </code><code>0</code> <code>1px</code> <code>0</code> <code>white</code> <code>inset</code><code>, </code><code>0</code> <code>-1px</code> <code>0</code> <code>#d4d4d4</code> <code>inset</code><code>;</code>
<code> </code><code>-webkit-box-shadow: </code><code>0</code> <code>1px</code> <code>0</code> <code>white</code> <code>inset</code><code>, </code><code>0</code> <code>-1px</code> <code>0</code> <code>#d4d4d4</code> <code>inset</code><code>;</code>
<code> </code><code>box-shadow: </code><code>0</code> <code>1px</code> <code>0</code> <code>white</code> <code>inset</code><code>, </code><code>0</code> <code>-1px</code> <code>0</code> <code>#d4d4d4</code> <code>inset</code><code>;</code>
<code> </code><code>text-shadow</code><code>: </code><code>0</code> <code>-1px</code> <code>0</code> <code>rgba(</code><code>255</code><code>, </code><code>255</code><code>, </code><code>255</code><code>, </code><code>0.3</code><code>);</code>
<code> </code><code>padding</code><code>: </code><code>10px</code> <code>10px</code><code>;</code>
<code>.dropdown .dropdown-menu li a:hover {</code>
<code> </code><code>background</code><code>: </code><code>#f6f6f6</code><code>;</code>
<code>.dropdown .</code><code>show</code><code>, .dropdown .</code><code>hide</code> <code>{</code>
<code> </code><code>-moz-transform-origin: </code><code>50%</code> <code>0%</code><code>;</code>
<code> </code><code>-ms-transform-origin: </code><code>50%</code> <code>0%</code><code>;</code>
<code> </code><code>-o-transform-origin: </code><code>50%</code> <code>0%</code><code>;</code>
<code> </code><code>-webkit-transform-origin: </code><code>50%</code> <code>0%</code><code>;</code>
<code> </code><code>transform-origin: </code><code>50%</code> <code>0%</code><code>;</code>
<code>.dropdown .</code><code>show</code> <code>{</code>
<code> </code><code>max-height</code><code>: </code><code>9999px</code><code>;</code>
<code> </code><code>-moz-transform: scaleY(</code><code>1</code><code>);</code>
<code> </code><code>-ms-transform: scaleY(</code><code>1</code><code>);</code>
<code> </code><code>-o-transform: scaleY(</code><code>1</code><code>);</code>
<code> </code><code>-webkit-transform: scaleY(</code><code>1</code><code>);</code>
<code> </code><code>transform: scaleY(</code><code>1</code><code>);</code>
<code> </code><code>animation: showAnimation </code><code>0.5</code><code>s ease-in-out;</code>
<code> </code><code>-moz-animation: showAnimation </code><code>0.5</code><code>s ease-in-out;</code>
<code> </code><code>-webkit-animation: showAnimation </code><code>0.5</code><code>s ease-in-out;</code>
<code> </code><code>-moz-transition: max-height </code><code>1</code><code>s ease-in-out;</code>
<code> </code><code>-o-transition: max-height </code><code>1</code><code>s ease-in-out;</code>
<code> </code><code>-webkit-transition: max-height </code><code>1</code><code>s ease-in-out;</code>
<code> </code><code>transition: max-height </code><code>1</code><code>s ease-in-out;</code>
<code>.dropdown .</code><code>hide</code> <code>{</code>
<code> </code><code>-moz-transform: scaleY(</code><code>0</code><code>);</code>
<code> </code><code>-ms-transform: scaleY(</code><code>0</code><code>);</code>
<code> </code><code>-o-transform: scaleY(</code><code>0</code><code>);</code>
<code> </code><code>-webkit-transform: scaleY(</code><code>0</code><code>);</code>
<code> </code><code>transform: scaleY(</code><code>0</code><code>);</code>
<code> </code><code>animation: hideAnimation </code><code>0.4</code><code>s ease-out;</code>
<code> </code><code>-moz-animation: hideAnimation </code><code>0.4</code><code>s ease-out;</code>
<code> </code><code>-webkit-animation: hideAnimation </code><code>0.4</code><code>s ease-out;</code>
<code> </code><code>-moz-transition: max-height </code><code>0.6</code><code>s ease-out;</code>
<code> </code><code>-o-transition: max-height </code><code>0.6</code><code>s ease-out;</code>
<code> </code><code>-webkit-transition: max-height </code><code>0.6</code><code>s ease-out;</code>
<code> </code><code>transition: max-height </code><code>0.6</code><code>s ease-out;</code>
<code>@keyframes showAnimation {</code>
<code> </code><code>0%</code> <code>{</code>
<code> </code><code>-moz-transform: scaleY(</code><code>0.1</code><code>);</code>
<code> </code><code>-ms-transform: scaleY(</code><code>0.1</code><code>);</code>
<code> </code><code>-o-transform: scaleY(</code><code>0.1</code><code>);</code>
<code> </code><code>-webkit-transform: scaleY(</code><code>0.1</code><code>);</code>
<code> </code><code>transform: scaleY(</code><code>0.1</code><code>);</code>
<code> </code><code>}</code>
<code> </code><code>40%</code> <code>{</code>
<code> </code><code>-moz-transform: scaleY(</code><code>1.04</code><code>);</code>
<code> </code><code>-ms-transform: scaleY(</code><code>1.04</code><code>);</code>
<code> </code><code>-o-transform: scaleY(</code><code>1.04</code><code>);</code>
<code> </code><code>-webkit-transform: scaleY(</code><code>1.04</code><code>);</code>
<code> </code><code>transform: scaleY(</code><code>1.04</code><code>);</code>
<code> </code><code>60%</code> <code>{</code>
<code> </code><code>-moz-transform: scaleY(</code><code>0.98</code><code>);</code>
<code> </code><code>-ms-transform: scaleY(</code><code>0.98</code><code>);</code>
<code> </code><code>-o-transform: scaleY(</code><code>0.98</code><code>);</code>
<code> </code><code>-webkit-transform: scaleY(</code><code>0.98</code><code>);</code>
<code> </code><code>transform: scaleY(</code><code>0.98</code><code>);</code>
<code> </code><code>80%</code> <code>{</code>
<code> </code><code>100%</code> <code>{</code>
<code> </code><code>-moz-transform: scaleY(</code><code>1.02</code><code>);</code>
<code> </code><code>-ms-transform: scaleY(</code><code>1.02</code><code>);</code>
<code> </code><code>-o-transform: scaleY(</code><code>1.02</code><code>);</code>
<code> </code><code>-webkit-transform: scaleY(</code><code>1.02</code><code>);</code>
<code> </code><code>transform: scaleY(</code><code>1.02</code><code>);</code>
<code> </code><code>-moz-transform: scaleY(</code><code>1</code><code>);</code>
<code> </code><code>-ms-transform: scaleY(</code><code>1</code><code>);</code>
<code> </code><code>-o-transform: scaleY(</code><code>1</code><code>);</code>
<code> </code><code>-webkit-transform: scaleY(</code><code>1</code><code>);</code>
<code> </code><code>transform: scaleY(</code><code>1</code><code>);</code>
<code>@-moz-keyframes showAnimation {</code>
<code>@-webkit-keyframes showAnimation {</code>
<code>@keyframes hideAnimation {</code>
<code> </code><code>-moz-transform: scaleY(</code><code>0</code><code>);</code>
<code> </code><code>-ms-transform: scaleY(</code><code>0</code><code>);</code>
<code> </code><code>-o-transform: scaleY(</code><code>0</code><code>);</code>
<code> </code><code>-webkit-transform: scaleY(</code><code>0</code><code>);</code>
<code> </code><code>transform: scaleY(</code><code>0</code><code>);</code>
<code>@-moz-keyframes hideAnimation {</code>
<code>@-webkit-keyframes hideAnimation {</code>
腳本檔案js/index.js：
<code>// Dropdown Menu</code>
<code>var</code> <code>dropdown = document.querySelectorAll(</code><code>'.dropdown'</code><code>);</code>
<code>var</code> <code>dropdownArray = </code><code>Array</code><code>.prototype.slice.call(dropdown,</code><code>0</code><code>);</code>
<code>dropdownArray.forEach(</code><code>function</code><code>(el){</code>
<code> </code><code>var</code> <code>button = el.querySelector(</code><code>'a[data-toggle="dropdown"]'</code><code>),</code>
<code> </code><code>menu = el.querySelector(</code><code>'.dropdown-menu'</code><code>),</code>
<code> </code><code>arrow = button.querySelector(</code><code>'i.icon-arrow'</code><code>);</code>
<code> </code><code>button.onclick = </code><code>function</code><code>(event) {</code>
<code> </code><code>if</code><code>(!menu.hasClass(</code><code>'show'</code><code>)) {</code>
<code> </code><code>menu.classList.add(</code><code>'show'</code><code>);</code>
<code> </code><code>menu.classList.remove(</code><code>'hide'</code><code>);</code>
<code> </code><code>arrow.classList.add(</code><code>'open'</code><code>);</code>
<code> </code><code>arrow.classList.remove(</code><code>'close'</code><code>);</code>
<code> </code><code>event.preventDefault();</code>
<code> </code><code>}</code>
<code> </code><code>else</code> <code>{</code>
<code> </code><code>menu.classList.remove(</code><code>'show'</code><code>);</code>
<code> </code><code>menu.classList.add(</code><code>'hide'</code><code>);</code>
<code> </code><code>arrow.classList.remove(</code><code>'open'</code><code>);</code>
<code> </code><code>arrow.classList.add(</code><code>'close'</code><code>);</code>
<code> </code><code>};</code>
<code>})</code>
<code>Element.prototype.hasClass = </code><code>function</code><code>(className) {</code>
<code> </code><code>return</code> <code>this</code><code>.className && </code><code>new</code> <code>RegExp(</code><code>"(^|\\s)"</code> <code>+ className + </code><code>"(\\s|$)"</code><code>).test(</code><code>this</code><code>.className);</code>
<code>};</code>
<a href="http://down.51cto.com/data/2364080" target="_blank">附件：http://down.51cto.com/data/2364080</a>
本文轉自stock0991 51CTO部落格，原文連結：http://blog.51cto.com/qing0991/1362089，如需轉載請自行聯系原作者
![主流浏覽器四大綜合性能測試[圖]](data:image/gif;base64,R0lGODlhAQABAIAAAP///wAAACwAAAAAAQABAAACAkQBADs=)