diff --git a/examples/components/demo-block.vue b/examples/components/demo-block.vue
index cd80f5db8..e4ed8c1e6 100644
--- a/examples/components/demo-block.vue
+++ b/examples/components/demo-block.vue
@@ -153,7 +153,7 @@
       }
 
       &:hover {
-        color: #20a0ff;
+        color: #409EFF;
         background-color: #f9fafc;
       }
 
@@ -167,8 +167,10 @@
         line-height: 26px;
         position: absolute;
         top: 0;
-        right: 25px;
+        right: 0;
         font-size: 14px;
+        padding-left: 5px;
+        padding-right: 25px;
       }
     }
   }
diff --git a/examples/components/side-nav.vue b/examples/components/side-nav.vue
index 85cfff519..5ac4064c4 100644
--- a/examples/components/side-nav.vue
+++ b/examples/components/side-nav.vue
@@ -17,6 +17,10 @@
       margin: 0;
       overflow: hidden;
     }
+    
+    > ul > .nav-item > a {
+      margin-top: 15px;
+    }
 
     .nav-item {
       a {
diff --git a/examples/docs/en-US/color-picker.md b/examples/docs/en-US/color-picker.md
index d3d0e4e62..0cc1c9b63 100644
--- a/examples/docs/en-US/color-picker.md
+++ b/examples/docs/en-US/color-picker.md
@@ -5,7 +5,7 @@
         color1: '#409EFF',
         color2: null,
         color3: 'rgba(19, 206, 102, 0.8)',
-        color4: '#20a0ff'
+        color4: '#409EFF'
       };
     },
     mounted() {
@@ -101,7 +101,7 @@ ColorPicker is a color selector supporting multiple color formats.
   export default {
     data() {
       return {
-        color4: '#20a0ff'
+        color4: '#409EFF'
       }
     }
   };
diff --git a/examples/docs/en-US/dropdown.md b/examples/docs/en-US/dropdown.md
index 3a6f548de..895134070 100644
--- a/examples/docs/en-US/dropdown.md
+++ b/examples/docs/en-US/dropdown.md
@@ -9,7 +9,7 @@
     }
     .el-dropdown-link {
       cursor: pointer;
-      color: #20a0ff;
+      color: #409EFF;
     }
     .el-icon-caret-bottom {
       font-size: 12px;
@@ -71,6 +71,17 @@ Hover on the dropdown menu to unfold it for more actions.
     <el-dropdown-item divided>Action 5</el-dropdown-item>
   </el-dropdown-menu>
 </el-dropdown>
+
+<style>
+  .el-dropdown-link {
+    cursor: pointer;
+    color: #409EFF;
+  }
+  .el-icon-caret-bottom {
+    font-size: 12px;
+  }
+</style>
+
 ```
 
 :::
@@ -103,6 +114,28 @@ Use the button to trigger the dropdown list.
     <el-dropdown-item>Action 5</el-dropdown-item>
   </el-dropdown-menu>
 </el-dropdown>
+
+<style>
+  .el-dropdown {
+    vertical-align: top;
+  }
+  .el-dropdown + .el-dropdown {
+    margin-left: 15px;
+  }
+  .el-icon-caret-bottom {
+    font-size: 12px;
+  }
+</style>
+
+<script>
+  export default {
+    methods: {
+      handleClick() {
+        alert('button click');
+      }
+    }
+  }
+</script>
 ```
 :::
 
@@ -145,6 +178,22 @@ Click the triggering element or hover on it.
     </el-dropdown>
   </el-col>
 </el-row>
+
+<style>
+  .el-dropdown-link {
+    cursor: pointer;
+    color: #409EFF;
+  }
+  .el-icon-caret-bottom {
+    font-size: 12px;
+  }
+  .demonstration {
+    display: block;
+    color: #8492a6;
+    font-size: 14px;
+    margin-bottom: 20px;
+  }
+</style>
 ```
 :::
 
@@ -166,6 +215,16 @@ Use `hide-on-click` to define if menu closes on clicking.
     <el-dropdown-item divided>Action 5</el-dropdown-item>
   </el-dropdown-menu>
 </el-dropdown>
+
+<style>
+  .el-dropdown-link {
+    cursor: pointer;
+    color: #409EFF;
+  }
+  .el-icon-caret-bottom {
+    font-size: 12px;
+  }
+</style>
 ```
 :::
 
@@ -187,6 +246,17 @@ Clicking each dropdown item fires an event whose parameter is assigned by each i
     <el-dropdown-item command="e" divided>Action 5</el-dropdown-item>
   </el-dropdown-menu>
 </el-dropdown>
+
+<style>
+  .el-dropdown-link {
+    cursor: pointer;
+    color: #409EFF;
+  }
+  .el-icon-caret-bottom {
+    font-size: 12px;
+  }
+</style>
+
 <script>
   export default {
     methods: {
@@ -206,7 +276,7 @@ Besides default size, Dropdown component provides three additional sizes for you
 :::demo Use attribute `size` to set additional sizes with `medium`, `small` or `mini`.
 
 ```html
-<el-dropdown  split-button type="primary">
+<el-dropdown split-button type="primary">
   Default
   <el-dropdown-menu slot="dropdown">
     <el-dropdown-item>Action 1</el-dropdown-item>
diff --git a/examples/docs/en-US/switch.md b/examples/docs/en-US/switch.md
index 3bcb28259..6a76991de 100644
--- a/examples/docs/en-US/switch.md
+++ b/examples/docs/en-US/switch.md
@@ -149,7 +149,7 @@ on-text | text displayed when in `on` state | string | — | —
 off-text | text displayed when in `off` state | string | — | —
 on-value  | switch value when in `on` state | boolean / string / number | — | true
 off-value  | switch value when in `off` state | boolean / string / number | — | false
-on-color | background color when in `on` state | string | — | #20A0FF
+on-color | background color when in `on` state | string | — | #409EFF
 off-color | background color when in `off` state | string | — | #C0CCDA
 name| input name of Switch | string | — | —
 
diff --git a/examples/docs/en-US/transition.md b/examples/docs/en-US/transition.md
index c330a2e06..b97e8ceeb 100644
--- a/examples/docs/en-US/transition.md
+++ b/examples/docs/en-US/transition.md
@@ -35,7 +35,7 @@ You can use Element's built-in transitions directly. Before that, please read th
     width: 200px;
     height: 100px;
     border-radius: 4px;
-    background-color: #20A0FF;
+    background-color: #409EFF;
     text-align: center;
     color: #fff;
     padding: 40px 20px;
@@ -84,7 +84,7 @@ You can use Element's built-in transitions directly. Before that, please read th
     width: 200px;
     height: 100px;
     border-radius: 4px;
-    background-color: #20A0FF;
+    background-color: #409EFF;
     text-align: center;
     color: #fff;
     padding: 40px 20px;
@@ -131,7 +131,7 @@ For collapse effect, use the `el-collapse-transition` component.
     width: 200px;
     height: 100px;
     border-radius: 4px;
-    background-color: #20A0FF;
+    background-color: #409EFF;
     text-align: center;
     color: #fff;
     padding: 40px 20px;
@@ -160,7 +160,7 @@ Vue.component(CollapseTransition.name, CollapseTransition)
     width: 200px;
     height: 100px;
     border-radius: 4px;
-    background-color: #20A0FF;
+    background-color: #409EFF;
     text-align: center;
     color: #fff;
     padding: 40px 20px;
diff --git a/examples/docs/en-US/upload.md b/examples/docs/en-US/upload.md
index 8b9a7f13a..dee24fe4d 100644
--- a/examples/docs/en-US/upload.md
+++ b/examples/docs/en-US/upload.md
@@ -19,7 +19,7 @@
         overflow: hidden;
 
         &:hover {
-          border-color: #20a0ff;
+          border-color: #409EFF;
         }
       }
       .avatar-uploader-icon {
@@ -179,7 +179,7 @@ Use `before-upload` hook to limit the upload file format and size.
     overflow: hidden;
   }
   .avatar-uploader .el-upload:hover {
-    border-color: #20a0ff;
+    border-color: #409EFF;
   }
   .avatar-uploader-icon {
     font-size: 28px;
diff --git a/examples/docs/zh-CN/color-picker.md b/examples/docs/zh-CN/color-picker.md
index 29933c5fb..b89950b16 100644
--- a/examples/docs/zh-CN/color-picker.md
+++ b/examples/docs/zh-CN/color-picker.md
@@ -5,7 +5,7 @@
         color1: '#409EFF',
         color2: null,
         color3: 'rgba(19, 206, 102, 0.8)',
-        color4: '#20a0ff'
+        color4: '#409EFF'
       };
     },
     mounted() {
@@ -101,7 +101,7 @@
   export default {
     data() {
       return {
-        color4: '#20a0ff'
+        color4: '#409EFF'
       }
     }
   };
diff --git a/examples/docs/zh-CN/dropdown.md b/examples/docs/zh-CN/dropdown.md
index d8a4e6abc..34710a4b8 100644
--- a/examples/docs/zh-CN/dropdown.md
+++ b/examples/docs/zh-CN/dropdown.md
@@ -9,7 +9,7 @@
     }
     .el-dropdown-link {
       cursor: pointer;
-      color: #20a0ff;
+      color: #409EFF;
     }
     .el-icon-caret-bottom {
       font-size: 12px;
@@ -74,6 +74,17 @@
   </el-dropdown-menu>
 </el-dropdown>
 ```
+
+<style>
+  .el-dropdown-link {
+    cursor: pointer;
+    color: #409EFF;
+  }
+  .el-icon-caret-bottom {
+    font-size: 12px;
+  }
+</style>
+
 :::
 
 ### 触发对象
@@ -106,6 +117,28 @@
   </el-dropdown-menu>
 </el-dropdown>
 
+<style>
+  .el-dropdown {
+    vertical-align: top;
+  }
+  .el-dropdown + .el-dropdown {
+    margin-left: 15px;
+  }
+  .el-icon-caret-bottom {
+    font-size: 12px;
+  }
+</style>
+
+<script>
+  export default {
+    methods: {
+      handleClick() {
+        alert('button click');
+      }
+    }
+  }
+</script>
+
 ```
 :::
 
@@ -148,6 +181,23 @@
   </el-col>
 </el-row>
 ```
+
+<style>
+  .el-dropdown-link {
+    cursor: pointer;
+    color: #409EFF;
+  }
+  .el-icon-caret-bottom {
+    font-size: 12px;
+  }
+  .demonstration {
+    display: block;
+    color: #8492a6;
+    font-size: 14px;
+    margin-bottom: 20px;
+  }
+</style>
+
 :::
 
 ### 菜单隐藏方式
@@ -168,6 +218,16 @@
     <el-dropdown-item divided>蚵仔煎</el-dropdown-item>
   </el-dropdown-menu>
 </el-dropdown>
+
+<style>
+  .el-dropdown-link {
+    cursor: pointer;
+    color: #409EFF;
+  }
+  .el-icon-caret-bottom {
+    font-size: 12px;
+  }
+</style>
 ```
 :::
 
@@ -189,6 +249,17 @@
     <el-dropdown-item command="e" divided>蚵仔煎</el-dropdown-item>
   </el-dropdown-menu>
 </el-dropdown>
+
+<style>
+  .el-dropdown-link {
+    cursor: pointer;
+    color: #409EFF;
+  }
+  .el-icon-caret-bottom {
+    font-size: 12px;
+  }
+</style>
+
 <script>
   export default {
     methods: {
@@ -208,7 +279,7 @@ Dropdown 组件提供除了默认值以外的三种尺寸，可以在不同场
 :::demo 额外的尺寸：`medium`、`small`、`mini`，通过设置`size`属性来配置它们。
 
 ```html
-<el-dropdown  split-button type="primary">
+<el-dropdown split-button type="primary">
   默认尺寸
   <el-dropdown-menu slot="dropdown">
     <el-dropdown-item>黄金糕</el-dropdown-item>
diff --git a/examples/docs/zh-CN/switch.md b/examples/docs/zh-CN/switch.md
index 0aecb2cbc..db3e26d9d 100644
--- a/examples/docs/zh-CN/switch.md
+++ b/examples/docs/zh-CN/switch.md
@@ -152,7 +152,7 @@
 | off-text  | switch 关闭时的文字描述    | string   | — | — |
 | on-value  | switch 打开时的值    | boolean / string / number | — | true |
 | off-value  | switch 关闭时的值    | boolean / string / number | — | false |
-| on-color  | switch 打开时的背景色    | string   | — | #20A0FF |
+| on-color  | switch 打开时的背景色    | string   | — | #409EFF |
 | off-color  | switch 关闭时的背景色    | string   | — | #C0CCDA |
 | name  | switch 对应的 name 属性    | string   | — | — |
 
diff --git a/examples/docs/zh-CN/transition.md b/examples/docs/zh-CN/transition.md
index ed1abb778..b3a22bf22 100644
--- a/examples/docs/zh-CN/transition.md
+++ b/examples/docs/zh-CN/transition.md
@@ -35,7 +35,7 @@ Element 内应用在部分组件的过渡动画，你也可以直接使用。在
     width: 200px;
     height: 100px;
     border-radius: 4px;
-    background-color: #20A0FF;
+    background-color: #409EFF;
     text-align: center;
     color: #fff;
     padding: 40px 20px;
@@ -84,7 +84,7 @@ Element 内应用在部分组件的过渡动画，你也可以直接使用。在
     width: 200px;
     height: 100px;
     border-radius: 4px;
-    background-color: #20A0FF;
+    background-color: #409EFF;
     text-align: center;
     color: #fff;
     padding: 40px 20px;
@@ -131,7 +131,7 @@ Element 内应用在部分组件的过渡动画，你也可以直接使用。在
     width: 200px;
     height: 100px;
     border-radius: 4px;
-    background-color: #20A0FF;
+    background-color: #409EFF;
     text-align: center;
     color: #fff;
     padding: 40px 20px;
@@ -160,7 +160,7 @@ Vue.component(CollapseTransition.name, CollapseTransition)
     width: 200px;
     height: 100px;
     border-radius: 4px;
-    background-color: #20A0FF;
+    background-color: #409EFF;
     text-align: center;
     color: #fff;
     padding: 40px 20px;
diff --git a/examples/docs/zh-CN/upload.md b/examples/docs/zh-CN/upload.md
index d7828e9ba..c4f4bd3c6 100644
--- a/examples/docs/zh-CN/upload.md
+++ b/examples/docs/zh-CN/upload.md
@@ -19,7 +19,7 @@
         overflow: hidden;
 
         &:hover {
-          border-color: #20a0ff;
+          border-color: #409EFF;
         }
       }
       .avatar-uploader-icon {
@@ -179,7 +179,7 @@
     overflow: hidden;
   }
   .avatar-uploader .el-upload:hover {
-    border-color: #20a0ff;
+    border-color: #409EFF;
   }
   .avatar-uploader-icon {
     font-size: 28px;
diff --git a/examples/index.tpl b/examples/index.tpl
index 233c73a84..cc77503cb 100644
--- a/examples/index.tpl
+++ b/examples/index.tpl
@@ -4,7 +4,7 @@
     <meta charset="utf-8">
     <meta name="viewport" content="width=device-width, user-scalable=no, initial-scale=1.0, maximum-scale=1.0, minimum-scale=1.0">
     <link rel="stylesheet" href="//at.alicdn.com/t/font_1473762766_7074292.css">
-    <link rel='mask-icon' href="https://raw.githubusercontent.com/ElemeFE/element/dev/examples/assets/images/element-logo-small.svg" color="#20a0ff">
+    <link rel='mask-icon' href="https://raw.githubusercontent.com/ElemeFE/element/dev/examples/assets/images/element-logo-small.svg" color="#409EFF">
     <title>Element</title>
   </head>
   <body>
diff --git a/examples/pages/template/changelog.tpl b/examples/pages/template/changelog.tpl
index 9f5481499..90a489361 100644
--- a/examples/pages/template/changelog.tpl
+++ b/examples/pages/template/changelog.tpl
@@ -17,7 +17,7 @@
       }
 
       &:hover a {
-        color: #20a0ff;
+        color: #409EFF;
       }
     }
 
diff --git a/examples/pages/template/component.tpl b/examples/pages/template/component.tpl
index a013a32bf..334e02e92 100644
--- a/examples/pages/template/component.tpl
+++ b/examples/pages/template/component.tpl
@@ -71,7 +71,7 @@
           }
 
           td, th {
-            border-bottom: 1px solid #eaeefb;
+            border-bottom: 1px solid #d8d8d8;
             padding: 15px;
             max-width: 250px;
           }
diff --git a/examples/pages/template/index.tpl b/examples/pages/template/index.tpl
index 148ed3e95..67adad2fa 100644
--- a/examples/pages/template/index.tpl
+++ b/examples/pages/template/index.tpl
@@ -120,7 +120,7 @@
       height: 53px;
       line-height: 52px;
       font-size: 14px;
-      color: #20a0ff;
+      color: #409EFF;
       text-align: center;
       border: 0;
       border-top: 1px solid #eaeefb;
@@ -138,7 +138,7 @@
 
       &:hover {
         color: #fff;
-        background: #20a0ff;
+        background: #409EFF;
       }
     }
     &:hover {
diff --git a/examples/pages/template/resource.tpl b/examples/pages/template/resource.tpl
index 47bfc4e99..54790c6a4 100644
--- a/examples/pages/template/resource.tpl
+++ b/examples/pages/template/resource.tpl
@@ -65,7 +65,7 @@
       display: inline-block;
       line-height: @height;
       font-size: 14px;
-      background-color: #20a0ff;
+      background-color: #409EFF;
       color: #fff;
       text-align: center;
       border: 0;
diff --git a/packages/dropdown/src/dropdown-menu.vue b/packages/dropdown/src/dropdown-menu.vue
index 0c5ea2bf0..8f2c4b6a1 100644
--- a/packages/dropdown/src/dropdown-menu.vue
+++ b/packages/dropdown/src/dropdown-menu.vue
@@ -15,9 +15,15 @@
 
     mixins: [Popper],
 
+    props: {
+      visibleArrow: {
+        type: Boolean,
+        default: true
+      }
+    },
+
     data() {
       return {
-        visibleArrow: this.dropdown.visibleArrow,
         size: this.dropdown.size
       };
     },