Add dropdown submenu demo and style, close #797

components/dropdown/demo/sub-menu.md

@@ -0,0 +1,29 @@
+# 多级菜单
+
+- order: 5
+
+传入的菜单里有多个层级。
+
+---
+
+````jsx
+import { Menu, Dropdown, Icon } from 'antd';
+const SubMenu = Menu.SubMenu;
+
+const menu = <Menu>
+  <Menu.Item>第一个菜单项</Menu.Item>
+  <Menu.Item>第二个菜单项</Menu.Item>
+  <SubMenu title="子菜单">
+    <Menu.Item>第三个菜单项</Menu.Item>
+    <Menu.Item>第四个菜单项</Menu.Item>
+  </SubMenu>
+</Menu>;
+
+ReactDOM.render(
+  <Dropdown overlay={menu}>
+    <a className="ant-dropdown-link" href="#">
+      多级菜单 <Icon type="down" />
+    </a>
+  </Dropdown>
+, mountNode);
+````

style/components/dropdown.less

@@ -30,7 +30,8 @@
     }
   }
 
-  &-hidden {
+  &-hidden,
+  &-menu-hidden {
     display: none;
   }
 
@@ -46,15 +47,11 @@
     box-shadow: @box-shadow-base;
     background-clip: padding-box;
     border: 1px solid @border-color-base;
-    overflow: hidden;
 
-    > li {
-      margin: 0;
-      padding: 0;
-    }
-
-    & > &-item {
+    &-item,
+    &-submenu-title {
       padding: 7px 15px;
+      margin: 0;
       clear: both;
       font-size: 12px;
       font-weight: normal;
@@ -86,14 +83,12 @@
         }
       }
 
-      &:last-child {
-        border-bottom-left-radius: 3px;
-        border-bottom-right-radius: 3px;
+      &:first-child {
+        border-radius: @border-radius-base @border-radius-base 0 0;
       }
 
-      &:first-child {
-        border-top-left-radius: 3px;
-        border-top-right-radius: 3px;
+      &:last-child {
+        border-radius: 0 0 @border-radius-base @border-radius-base;
       }
 
       &-divider {
@@ -103,6 +98,35 @@
         line-height: 0;
       }
     }
+
+    &-submenu-title:after {
+      font-family: "anticon" !important;
+      position: absolute;
+      content: "\e600";
+      right: 15px;
+      color: #999;
+      .iconfont-size-under-12px(8px);
+    }
+
+    &-submenu-vertical {
+      position: relative;
+    }
+
+    &-submenu-vertical > & {
+      top: 0;
+      left: 100%;
+      position: absolute;
+      min-width: 100%;
+      margin-left: 4px;
+    }
+
+    &-submenu:first-child &-submenu-title {
+      border-radius: @border-radius-base @border-radius-base 0 0;
+    }
+
+    &-submenu:last-child &-submenu-title {
+      border-radius: 0 0 @border-radius-base @border-radius-base;
+    }
   }
 
   &.slide-up-enter.slide-up-enter-active&-placement-bottomLeft,