diff --git a/src/components/dropdown/dropdown.vue b/src/components/dropdown/dropdown.vue
index 8c3ef5f8..9aaf681e 100644
--- a/src/components/dropdown/dropdown.vue
+++ b/src/components/dropdown/dropdown.vue
@@ -4,10 +4,7 @@
         v-clickoutside="handleClose"
         @mouseenter="handleMouseenter"
         @mouseleave="handleMouseleave">
-        <div
-            :class="[prefixCls-rel]"
-            v-el:reference
-            @click="handleClick"><slot></slot></div>
+        <div :class="[prefixCls-rel]" v-el:reference @click="handleClick"><slot></slot></div>
         <Drop v-show="visible" :placement="placement" :transition="transition" v-ref:drop><slot name="list"></slot></Drop>
     </div>
 </template>
diff --git a/src/components/menu/menu-group.vue b/src/components/menu/menu-group.vue
index f67cf44d..7236e457 100644
--- a/src/components/menu/menu-group.vue
+++ b/src/components/menu/menu-group.vue
@@ -1,13 +1,30 @@
 <template>
-
+    <li :class="[prefixCls + '-item-group']">
+        <div :class="[prefixCls + '-item-group-title']">{{ title }}</div>
+        <ul><slot></slot></ul>
+    </li>
 </template>
 <script>
+    const prefixCls = 'ivu-menu';
+
     export default {
-        props: {},
-        data () {
-            return {}
+        name: 'MenuGroup',
+        props: {
+            title: {
+                type: String,
+                default: ''
+            }
         },
-        computed: {},
-        methods: {}
+        data () {
+            return {
+                prefixCls: prefixCls
+            }
+        },
+        computed: {
+
+        },
+        methods: {
+
+        }
     }
 </script>
\ No newline at end of file
diff --git a/src/components/menu/menu-item.vue b/src/components/menu/menu-item.vue
index f67cf44d..ee02e155 100644
--- a/src/components/menu/menu-item.vue
+++ b/src/components/menu/menu-item.vue
@@ -1,13 +1,42 @@
 <template>
-
+    <li :class="classes" @click.stop="handleClick"><slot></slot></li>
 </template>
 <script>
+    const prefixCls = 'ivu-menu';
+
     export default {
-        props: {},
-        data () {
-            return {}
+        name: 'MenuItem',
+        props: {
+            key: {
+                type: [String, Number],
+                required: true
+            },
+            disabled: {
+                type: Boolean,
+                default: false
+            }
         },
-        computed: {},
-        methods: {}
+        data () {
+            return {
+                active: false
+            }
+        },
+        computed: {
+            classes () {
+                return [
+                    `${prefixCls}-item`,
+                    {
+                        [`${prefixCls}-item-active`]: this.active,
+                        [`${prefixCls}-item-selected`]: this.active,
+                        [`${prefixCls}-item-disabled`]: this.disabled
+                    }
+                ]
+            }
+        },
+        methods: {
+            handleClick () {
+                this.$dispatch('on-menu-item-select', this.key);
+            }
+        }
     }
 </script>
\ No newline at end of file
diff --git a/src/components/menu/menu.vue b/src/components/menu/menu.vue
index f67cf44d..c49f232c 100644
--- a/src/components/menu/menu.vue
+++ b/src/components/menu/menu.vue
@@ -1,13 +1,93 @@
 <template>
-
+    <ul :class="classes"><slot></slot></ul>
 </template>
 <script>
+    import { oneOf } from '../../utils/assist';
+
+    const prefixCls = 'ivu-menu';
+
     export default {
-        props: {},
-        data () {
-            return {}
+        props: {
+            mode: {
+                validator (value) {
+                    return oneOf(value, ['horizontal', 'vertical']);
+                },
+                default: 'vertical'
+            },
+            theme: {
+                validator (value) {
+                    return oneOf(value, ['light', 'dark', 'primary']);
+                },
+                default: 'light'
+            },
+            activeKey: {
+                type: [String, Number]
+            },
+            openKeys: {
+                type: Array
+            },
+            accordion: {
+                type: Boolean,
+                default: false
+            }
         },
-        computed: {},
-        methods: {}
+        data () {
+            return {
+
+            }
+        },
+        computed: {
+            classes () {
+                return [
+                    `${prefixCls}`,
+                    {
+                        [`${prefixCls}-${this.mode}`]: this.mode,
+                        [`${prefixCls}-${this.theme}`]: this.theme
+                    }
+                ]
+            }
+        },
+        methods: {
+            updateActiveKey () {
+                this.$children.forEach((item, index) => {
+                    if (!this.activeKey && index === 0) this.activeKey = item.key;
+
+                    if (item.$options.name === 'Submenu') {
+                        item.active = false;
+                        item.$children.forEach(subitem => {
+                            if (subitem.$options.name === 'MenuGroup') {
+                                subitem.$children.forEach(groupItem => {
+                                    if (groupItem.key === this.activeKey) {
+                                        groupItem.active = true;
+                                        groupItem.$parent.$parent.active = true;
+                                    } else {
+                                        groupItem.active = false;
+                                    }
+                                })
+                            } else {
+                                if (subitem.key === this.activeKey) {
+                                    subitem.active = true;
+                                    subitem.$parent.active = true;
+                                } else {
+                                    subitem.active = false;
+                                }
+                            }
+                        })
+                    } else {
+                        item.active = item.key === this.activeKey;
+                    }
+                })
+            }
+        },
+        compiled () {
+            this.updateActiveKey();
+        },
+        events: {
+            'on-menu-item-select' (key) {
+                this.activeKey = key;
+                this.updateActiveKey();
+                this.$emit('on-select', key);
+            }
+        }
     }
 </script>
\ No newline at end of file
diff --git a/src/components/menu/submenu.vue b/src/components/menu/submenu.vue
index f67cf44d..4f10b91e 100644
--- a/src/components/menu/submenu.vue
+++ b/src/components/menu/submenu.vue
@@ -1,13 +1,84 @@
 <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>
+        <ul :class="[prefixCls]" v-if="mode === 'vertical'"></ul>
+        <Drop v-else v-show="opened" placement="bottom" transition="slide-up" v-ref:drop><slot></slot></Drop>
+    </li>
 </template>
 <script>
+    import Drop from '../select/dropdown.vue';
+    import Icon from '../icon/icon.vue';
+    const prefixCls = 'ivu-menu';
+
     export default {
-        props: {},
-        data () {
-            return {}
+        name: 'Submenu',
+        components: { Icon, Drop },
+        props: {
+            key: {
+                type: [String, Number],
+                required: true
+            }
         },
-        computed: {},
-        methods: {}
+        data () {
+            return {
+                prefixCls: prefixCls,
+                active: false,
+                opened: false
+            }
+        },
+        computed: {
+            classes () {
+                return [
+                    `${prefixCls}-submenu`,
+                    {
+                        [`${prefixCls}-item-active`]: this.active,
+                        [`${prefixCls}-opened`]: this.opened
+                    }
+                ]
+            },
+            mode () {
+                return this.$parent.mode;
+            }
+        },
+        methods: {
+            handleMouseenter () {
+                if (this.mode === 'vertical') return;
+                clearTimeout(this.timeout);
+                this.timeout = setTimeout(() => {
+                    this.opened = true;
+                }, 250);
+            },
+            handleMouseleave () {
+                if (this.mode === 'vertical') return;
+                clearTimeout(this.timeout);
+                this.timeout = setTimeout(() => {
+                    this.opened = false;
+                }, 150);
+            }
+        },
+        watch: {
+            mode (val) {
+                if (val === 'horizontal') {
+                    this.$refs.drop.update();
+                }
+            },
+            opened (val) {
+                if (this.mode === 'vertical') return;
+                if (val) {
+                    this.$refs.drop.update();
+                } else {
+                    this.$refs.drop.destroy();
+                }
+            }
+        },
+        events: {
+            'on-menu-item-select' () {
+                this.opened = false;
+                return true;
+            }
+        }
     }
 </script>
\ No newline at end of file
diff --git a/src/styles/components/menu.less b/src/styles/components/menu.less
index e69de29b..df4c69f8 100644
--- a/src/styles/components/menu.less
+++ b/src/styles/components/menu.less
@@ -0,0 +1,138 @@
+@menu-prefix-cls: ~"@{css-prefix}menu";
+@menu-dropdown-item-prefix-cls: ~"@{menu-prefix-cls}-horizontal .@{menu-prefix-cls}-submenu .@{select-dropdown-prefix-cls} .@{menu-prefix-cls}-item";
+
+.@{menu-prefix-cls} {
+    display: block;
+    margin: 0;
+    padding: 0;
+    outline: none;
+    list-style: none;
+    color: @text-color;
+    font-size: @font-size-base;
+    position: relative;
+
+    &-horizontal{
+        height: 60px;
+        line-height: 60px;
+
+        &.@{menu-prefix-cls}-light{
+            &:after{
+                content: '';
+                display: block;
+                width: 100%;
+                height: 1px;
+                background: @border-color-base;
+                position: absolute;
+                bottom: 0;
+                left: 0;
+            }
+        }
+    }
+    &-vertical{
+        width: 240px;
+        &.@{menu-prefix-cls}-light{
+            &:after{
+                content: '';
+                display: block;
+                width: 1px;
+                height: 100%;
+                background: @border-color-base;
+                position: absolute;
+                top: 0;
+                bottom: 0;
+                right: 0;
+            }
+        }
+    }
+
+    &-light{
+        background: #fff;
+    }
+    &-dark{
+        background: @title-color;
+    }
+    &-primary{
+        background: @primary-color;
+    }
+
+    &-item{
+        display: block;
+        outline: none;
+        list-style: none;
+        font-size: @font-size-base;
+        position: relative;
+        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;
+            }
+        }
+    }
+    &-horizontal &-item,
+    &-horizontal &-submenu
+    {
+        float: left;
+        padding: 0 20px;
+        position: relative;
+        cursor: pointer;
+        z-index: 1;
+        transition: all @transition-time @ease-in-out;
+    }
+
+    &-light&-horizontal &-item, &-light&-horizontal &-submenu{
+        height: inherit;
+        line-height: inherit;
+        border-bottom: 2px solid transparent;
+        &-active, &:hover{
+            color: @primary-color;
+            border-bottom: 2px solid @primary-color;
+        }
+    }
+
+    &-dark&-horizontal &-item{
+        &-active, &:hover{
+            color: #fff;
+        }
+    }
+
+    &-primary&-horizontal &-item{
+        &-active, &:hover{
+            background: @link-active-color;
+        }
+    }
+
+    &-horizontal &-submenu .@{select-dropdown-prefix-cls} {
+        width: 100%;
+        .@{menu-prefix-cls}-item{
+            height: auto;
+            line-height: normal;
+            border-bottom: 0;
+            float: none;
+        }
+    }
+
+    &-item-group{
+        line-height: normal;
+        &-title {
+            padding-left: 8px;
+            font-size: 12px;
+            color: @legend-color;
+            height: 30px;
+            line-height: 30px;
+        }
+    }
+}
+.select-item(@menu-prefix-cls, @menu-dropdown-item-prefix-cls);
\ No newline at end of file
diff --git a/test/app.vue b/test/app.vue
index fc1611ae..0cbef694 100644
--- a/test/app.vue
+++ b/test/app.vue
@@ -44,6 +44,7 @@ li + li {
                 <li><a v-link="'/table'">Table</a></li>
                 <li><a v-link="'/dropdown'">Dropdown</a></li>
                 <li><a v-link="'/tabs'">Tabs</a></li>
+                <li><a v-link="'/menu'">Menu</a></li>
             </ul>
         </nav>
         <router-view></router-view>
diff --git a/test/main.js b/test/main.js
index 1b1729f0..89559aed 100644
--- a/test/main.js
+++ b/test/main.js
@@ -117,6 +117,11 @@ router.map({
         component: function (resolve) {
             require(['./routers/tabs.vue'], resolve);
         }
+    },
+    '/menu': {
+        component: function (resolve) {
+            require(['./routers/menu.vue'], resolve);
+        }
     }
 });
 
diff --git a/test/routers/menu.vue b/test/routers/menu.vue
new file mode 100644
index 00000000..cf73813e
--- /dev/null
+++ b/test/routers/menu.vue
@@ -0,0 +1,70 @@
+<template>
+    <div>
+        <i-button @click="toggleMode">调整方向</i-button>
+        <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">
+                <span slot="title">导航三</span>
+                <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>-->
+                <!--<span>导航一</span>-->
+            <!--</Menu-item>-->
+            <!--<Menu-item key="2">导航二</Menu-item>-->
+            <!--<Submenu key="3">-->
+            <!--<span slot="title">导航三</span>-->
+            <!--<Menu-item key="3-1">导航三 - 一</Menu-item>-->
+            <!--<Menu-item key="3-2">导航三 - 二</Menu-item>-->
+            <!--<Menu-item key="3-3">导航三 - 三</Menu-item>-->
+            <!--</Submenu>-->
+            <!--<Menu-item key="4">导航四</Menu-item>-->
+        <!--</Menu>-->
+        <!--<br><br>-->
+        <!--<Menu mode="horizontal" theme="primary" active-key="1">-->
+            <!--<Menu-item key="1">-->
+                <!--<Icon type="ionic"></Icon>-->
+                <!--<span>导航一</span>-->
+            <!--</Menu-item>-->
+            <!--<Menu-item key="2">导航二</Menu-item>-->
+            <!--<Submenu key="3">-->
+            <!--<span slot="title">导航三</span>-->
+            <!--<Menu-item key="3-1">导航三 - 一</Menu-item>-->
+            <!--<Menu-item key="3-2">导航三 - 二</Menu-item>-->
+            <!--<Menu-item key="3-3">导航三 - 三</Menu-item>-->
+            <!--</Submenu>-->
+            <!--<Menu-item key="4">导航四</Menu-item>-->
+        <!--</Menu>-->
+    </div>
+</template>
+<script>
+    export default {
+        props: {},
+        data () {
+            return {
+                mode: 'horizontal'
+            }
+        },
+        computed: {},
+        methods: {
+            toggleMode () {
+                this.mode = this.mode === 'horizontal' ? 'vertical' : 'horizontal';
+            }
+        }
+    }
+</script>
\ No newline at end of file
diff --git a/test/routers/select.vue b/test/routers/select.vue
index eb50e9e2..eb3828e1 100644
--- a/test/routers/select.vue
+++ b/test/routers/select.vue
@@ -1,16 +1,8 @@
 <template>
-    <Row style="margin: 100px">
-        <i-col span="12" style="padding-right:10px">
-            <i-select :model.sync="model11" filterable>
-                <i-option v-for="item in cityList" :value="item.value">{{ item.label }}</i-option>
-            </i-select>
-        </i-col>
-        <i-col span="12">
-            <i-select :model.sync="model12" filterable multiple>
-                <i-option v-for="item in cityList" :value="item.value">{{ item.label }}</i-option>
-            </i-select>
-        </i-col>
-    </Row>
+    <i-button @click="model8 = ''">clear</i-button>
+    <i-select :model.sync="model8" clearable style="width:200px">
+        <i-option v-for="item in cityList" :value="item.value">{{ item.label }}</i-option>
+    </i-select>
 </template>
 <script>
     export default {
@@ -42,8 +34,7 @@
                         label: '重庆市'
                     }
                 ],
-                model11: '',
-                model12: []
+                model8: ''
             }
         }
     }