diff --git a/components/dropdown/demo/sub-menu.md b/components/dropdown/demo/sub-menu.md
new file mode 100644
index 0000000000..841d9f86b8
--- /dev/null
+++ b/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 =
;
+
+ReactDOM.render(
+
+
+ 多级菜单
+
+
+, mountNode);
+````
diff --git a/style/components/dropdown.less b/style/components/dropdown.less
index 3aab30681a..87e940a718 100644
--- a/style/components/dropdown.less
+++ b/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,