diff --git a/src/components/menu/menu-item.vue b/src/components/menu/menu-item.vue
index ee02e155..92eecda8 100644
--- a/src/components/menu/menu-item.vue
+++ b/src/components/menu/menu-item.vue
@@ -35,6 +35,7 @@
         },
         methods: {
             handleClick () {
+                if (this.disabled) return;
                 this.$dispatch('on-menu-item-select', this.key);
             }
         }
diff --git a/src/components/menu/menu.vue b/src/components/menu/menu.vue
index c49f232c..ec747f7b 100644
--- a/src/components/menu/menu.vue
+++ b/src/components/menu/menu.vue
@@ -73,6 +73,10 @@
                                 }
                             }
                         })
+                    } else if (item.$options.name === 'MenuGroup') {
+                        item.$children.forEach(groupItem => {
+                            groupItem.active = groupItem.key === this.activeKey;
+                        })
                     } else {
                         item.active = item.key === this.activeKey;
                     }
diff --git a/src/components/menu/submenu.vue b/src/components/menu/submenu.vue
index 4f10b91e..5a47e3b7 100644
--- a/src/components/menu/submenu.vue
+++ b/src/components/menu/submenu.vue
@@ -1,10 +1,10 @@
 <template>
     <li :class="classes" @mouseenter="handleMouseenter" @mouseleave="handleMouseleave">
-        <div :class="[prefixCls + '-title']" v-el:reference>
-            <span><slot name="title"></slot></span>
-            <Icon type="ios-arrow-down"></Icon>
+        <div :class="[prefixCls + '-submenu-title']" v-el:reference @click="handleClick">
+            <slot name="title"></slot>
+            <Icon type="ios-arrow-down" :class="[prefixCls + '-submenu-title-icon']"></Icon>
         </div>
-        <ul :class="[prefixCls]" v-if="mode === 'vertical'"></ul>
+        <ul :class="[prefixCls]" v-if="mode === 'vertical'" v-show="opened"><slot></slot></ul>
         <Drop v-else v-show="opened" placement="bottom" transition="slide-up" v-ref:drop><slot></slot></Drop>
     </li>
 </template>
@@ -20,6 +20,10 @@
             key: {
                 type: [String, Number],
                 required: true
+            },
+            disabled: {
+                type: Boolean,
+                default: false
             }
         },
         data () {
@@ -35,28 +39,47 @@
                     `${prefixCls}-submenu`,
                     {
                         [`${prefixCls}-item-active`]: this.active,
-                        [`${prefixCls}-opened`]: this.opened
+                        [`${prefixCls}-opened`]: this.opened,
+                        [`${prefixCls}-submenu-disabled`]: this.disabled
                     }
                 ]
             },
             mode () {
                 return this.$parent.mode;
+            },
+            accordion () {
+                return this.$parent.accordion;
             }
         },
         methods: {
             handleMouseenter () {
+                if (this.disabled) return;
                 if (this.mode === 'vertical') return;
+
                 clearTimeout(this.timeout);
                 this.timeout = setTimeout(() => {
                     this.opened = true;
                 }, 250);
             },
             handleMouseleave () {
+                if (this.disabled) return;
                 if (this.mode === 'vertical') return;
+
                 clearTimeout(this.timeout);
                 this.timeout = setTimeout(() => {
                     this.opened = false;
                 }, 150);
+            },
+            handleClick () {
+                if (this.disabled) return;
+                if (this.mode === 'horizontal') return;
+                const opened = this.opened;
+                if (this.accordion) {
+                    this.$parent.$children.forEach(item => {
+                        if (item.$options.name === 'Submenu') item.opened = false;
+                    });
+                }
+                this.opened = !opened;
             }
         },
         watch: {
diff --git a/src/styles/components/menu.less b/src/styles/components/menu.less
index df4c69f8..ed2886e8 100644
--- a/src/styles/components/menu.less
+++ b/src/styles/components/menu.less
@@ -41,6 +41,7 @@
                 top: 0;
                 bottom: 0;
                 right: 0;
+                z-index: 1;
             }
         }
     }
@@ -64,23 +65,14 @@
         z-index: 1;
         cursor: pointer;
         transition: all @transition-time @ease-in-out;
-
-        .@{menu-prefix-cls}-light &{
-            color: @text-color;
-        }
-        .@{menu-prefix-cls}-dark &{
-            color: @subsidiary-color;
-            &-active, &:hover{
-                color: #fff;
-            }
-        }
-        .@{menu-prefix-cls}-primary &{
-            color: #fff;
-            &-active, &:hover{
-                background: @link-active-color;
-            }
-        }
     }
+    &-item > i{
+        margin-right: 6px;
+    }
+    &-submenu-title > i, &-submenu-title span > i{
+        margin-right: 8px;
+    }
+
     &-horizontal &-item,
     &-horizontal &-submenu
     {
@@ -88,7 +80,7 @@
         padding: 0 20px;
         position: relative;
         cursor: pointer;
-        z-index: 1;
+        z-index: 3;
         transition: all @transition-time @ease-in-out;
     }
 
@@ -96,19 +88,22 @@
         height: inherit;
         line-height: inherit;
         border-bottom: 2px solid transparent;
+        color: @text-color;
         &-active, &:hover{
             color: @primary-color;
             border-bottom: 2px solid @primary-color;
         }
     }
 
-    &-dark&-horizontal &-item{
+    &-dark&-horizontal &-item, &-dark&-horizontal &-submenu{
+        color: @subsidiary-color;
         &-active, &:hover{
             color: #fff;
         }
     }
 
-    &-primary&-horizontal &-item{
+    &-primary&-horizontal &-item, &-primary&-horizontal &-submenu{
+        color: #fff;
         &-active, &:hover{
             background: @link-active-color;
         }
@@ -128,11 +123,57 @@
         line-height: normal;
         &-title {
             padding-left: 8px;
-            font-size: 12px;
+            font-size: @font-size-small;
             color: @legend-color;
             height: 30px;
             line-height: 30px;
         }
     }
+
+    // vertical
+    &-vertical &-item,
+    &-vertical &-submenu-title
+    {
+        padding: 14px 24px;
+        position: relative;
+        cursor: pointer;
+        z-index: 1;
+        transition: all @transition-time @ease-in-out;
+
+        &:hover{
+            background: @background-color-select-hover;
+        }
+    }
+
+    &-vertical &-submenu-title-icon{
+        float: right;
+        position: relative;
+        top: 4px;
+    }
+    &-submenu-title-icon {
+        transition: transform @transition-time @ease-in-out;
+    }
+    &-opened &-submenu-title-icon{
+        transform: rotate(180deg);
+    }
+
+    &-vertical &-submenu &-item{
+        padding-left: 43px;
+    }
+    &-vertical &-item-group{
+        &-title{
+            font-size: @font-size-base;
+            padding-left: 28px;
+        }
+    }
+
+    &-light&-vertical &-item{
+        border-right: 2px solid transparent;
+        &-active:not(.@{menu-prefix-cls}-submenu){
+            color: @primary-color;
+            border-right: 2px solid @primary-color;
+            z-index: 2;
+        }
+    }
 }
 .select-item(@menu-prefix-cls, @menu-dropdown-item-prefix-cls);
\ No newline at end of file
diff --git a/test/routers/menu.vue b/test/routers/menu.vue
index cf73813e..f9986fbf 100644
--- a/test/routers/menu.vue
+++ b/test/routers/menu.vue
@@ -1,14 +1,12 @@
 <template>
     <div>
-        <i-button @click="toggleMode">调整方向</i-button>
-        <Menu :mode="mode" active-key="1">
+        <Menu mode="horizontal" active-key="1">
             <Menu-item key="1">
-                <Icon type="ionic"></Icon>
-                <span>导航一</span>
+                <Icon type="ionic"></Icon><span>导航一</span>
             </Menu-item>
             <Menu-item key="2">导航二</Menu-item>
             <Submenu key="3">
-                <span slot="title">导航三</span>
+                <template slot="title"><Icon type="ionic"></Icon>导航三</template>
                 <Menu-group title="集合1">
                     <Menu-item key="3-1">导航三 - 一</Menu-item>
                     <Menu-item key="3-2">导航三 - 二</Menu-item>
@@ -21,6 +19,65 @@
             <Menu-item key="4">导航四</Menu-item>
         </Menu>
         <br><br>
+        <Menu :mode="mode" active-key="1" accordion>
+            <Menu-item key="1">
+                <Icon type="ionic"></Icon>
+                <span>导航一</span>
+            </Menu-item>
+            <Menu-group title="集合1">
+                <Menu-item key="2">
+                    <Icon type="ionic"></Icon>
+                    导航二
+                </Menu-item>
+                <Menu-item key="3">导航三</Menu-item>
+            </Menu-group>
+            <Menu-group title="集合2">
+                <Menu-item key="4">导航四</Menu-item>
+                <Menu-item key="5">导航五</Menu-item>
+            </Menu-group>
+            <Submenu key="6">
+                <template slot="title"><Icon type="ionic"></Icon>导航六</template>
+                <Menu-group title="集合1">
+                    <Menu-item key="3-1">导航三 - 一</Menu-item>
+                    <Menu-item key="3-2">导航三 - 二</Menu-item>
+                </Menu-group>
+                <Menu-group title="集合2">
+                    <Menu-item key="3-3">导航三 - 三</Menu-item>
+                    <Menu-item key="3-4">导航三 - 四</Menu-item>
+                </Menu-group>
+            </Submenu>
+            <Submenu key="7">
+                <template slot="title"><Icon type="ionic"></Icon>导航七</template>
+                <Menu-group title="集合1">
+                    <Menu-item key="7-1">导航三 - 一</Menu-item>
+                    <Menu-item key="7-2">导航三 - 二</Menu-item>
+                </Menu-group>
+                <Menu-group title="集合2">
+                    <Menu-item key="7-3">导航三 - 三</Menu-item>
+                    <Menu-item key="7-4">导航三 - 四</Menu-item>
+                </Menu-group>
+            </Submenu>
+        </Menu>
+        <!--<Menu :mode="mode" active-key="1">-->
+            <!--<Menu-item key="1">-->
+                <!--<Icon type="ionic"></Icon>-->
+                <!--<span>导航一</span>-->
+            <!--</Menu-item>-->
+            <!--<Menu-item key="2">导航二</Menu-item>-->
+            <!--<Submenu key="3">-->
+                <!--<template slot="title"><Icon type="ionic"></Icon><span>导航三</span></template>-->
+                <!--<Menu-group title="集合1">-->
+                    <!--<Menu-item key="3-1">导航三 - 一</Menu-item>-->
+                    <!--<Menu-item key="3-2">导航三 - 二</Menu-item>-->
+                <!--</Menu-group>-->
+                <!--<Menu-group title="集合2">-->
+                    <!--<Menu-item key="3-3">导航三 - 三</Menu-item>-->
+                    <!--<Menu-item key="3-4">导航三 - 四</Menu-item>-->
+                <!--</Menu-group>-->
+            <!--</Submenu>-->
+            <!--<Menu-item key="4">导航四</Menu-item>-->
+        <!--</Menu>-->
+        <!--<br><br>-->
         <!--<Menu mode="horizontal" theme="dark" active-key="1">-->
             <!--<Menu-item key="1">-->
                 <!--<Icon type="ionic"></Icon>-->
@@ -57,7 +114,7 @@
         props: {},
         data () {
             return {
-                mode: 'horizontal'
+                mode: 'vertical'
             }
         },
         computed: {},