diff --git a/src/dropdown-menu/index.js b/src/dropdown-menu/index.js
index 087193685..383591887 100644
--- a/src/dropdown-menu/index.js
+++ b/src/dropdown-menu/index.js
@@ -1,6 +1,5 @@
 // Utils
-import { createNamespace } from '../utils';
-import { BORDER_TOP_BOTTOM } from '../utils/constant';
+import { createNamespace, isDef } from '../utils';
 import { getScroller } from '../utils/dom/scroll';
 
 // Mixins
@@ -49,15 +48,27 @@ export default createComponent({
     scroller() {
       return getScroller(this.$el);
     },
+
+    opened() {
+      return this.children.some((item) => item.showWrapper);
+    },
+
+    barStyle() {
+      if (this.opened && isDef(this.zIndex)) {
+        return {
+          zIndex: 1 + this.zIndex,
+        };
+      }
+    },
   },
 
   methods: {
     updateOffset() {
-      if (!this.$refs.menu) {
+      if (!this.$refs.bar) {
         return;
       }
 
-      const rect = this.$refs.menu.getBoundingClientRect();
+      const rect = this.$refs.bar.getBoundingClientRect();
 
       if (this.direction === 'down') {
         this.offset = rect.bottom;
@@ -113,8 +124,14 @@ export default createComponent({
     ));
 
     return (
-      <div ref="menu" class={[bem(), BORDER_TOP_BOTTOM]}>
-        {Titles}
+      <div class={bem()}>
+        <div
+          ref="bar"
+          style={this.barStyle}
+          class={bem('bar', { opened: this.opened })}
+        >
+          {Titles}
+        </div>
         {this.slots('default')}
       </div>
     );
diff --git a/src/dropdown-menu/index.less b/src/dropdown-menu/index.less
index ff747bc28..e293babc3 100644
--- a/src/dropdown-menu/index.less
+++ b/src/dropdown-menu/index.less
@@ -1,11 +1,20 @@
 @import '../style/var';
 
 .van-dropdown-menu {
-  display: flex;
-  height: @dropdown-menu-height;
-  background-color: @dropdown-menu-background-color;
   user-select: none;
 
+  &__bar {
+    position: relative;
+    display: flex;
+    height: @dropdown-menu-height;
+    background-color: @dropdown-menu-background-color;
+    box-shadow: 0 2px 12px fade(@gray-7, 8);
+
+    &--opened {
+      z-index: @dropdown-item-z-index + 1;
+    }
+  }
+
   &__item {
     display: flex;
     flex: 1;
@@ -44,7 +53,7 @@
       right: -4px;
       margin-top: -5px;
       border: 3px solid;
-      border-color: transparent transparent currentColor currentColor;
+      border-color: transparent transparent @gray-4 @gray-4;
       transform: rotate(-45deg);
       opacity: 0.8;
       content: '';
@@ -52,6 +61,10 @@
 
     &--active {
       color: @dropdown-menu-title-active-text-color;
+
+      &::after {
+        border-color: transparent transparent currentColor currentColor;
+      }
     }
 
     &--down {
diff --git a/src/dropdown-menu/test/__snapshots__/demo.spec.js.snap b/src/dropdown-menu/test/__snapshots__/demo.spec.js.snap
index 5afee72d1..2e154118c 100644
--- a/src/dropdown-menu/test/__snapshots__/demo.spec.js.snap
+++ b/src/dropdown-menu/test/__snapshots__/demo.spec.js.snap
@@ -3,9 +3,11 @@
 exports[`renders demo correctly 1`] = `
 <div>
   <div>
-    <div class="van-dropdown-menu van-hairline--top-bottom">
-      <div role="button" tabindex="0" class="van-dropdown-menu__item"><span class="van-dropdown-menu__title"><div class="van-ellipsis">全部商品</div></span></div>
-      <div role="button" tabindex="0" class="van-dropdown-menu__item"><span class="van-dropdown-menu__title"><div class="van-ellipsis">默认排序</div></span></div>
+    <div class="van-dropdown-menu">
+      <div class="van-dropdown-menu__bar">
+        <div role="button" tabindex="0" class="van-dropdown-menu__item"><span class="van-dropdown-menu__title"><div class="van-ellipsis">全部商品</div></span></div>
+        <div role="button" tabindex="0" class="van-dropdown-menu__item"><span class="van-dropdown-menu__title"><div class="van-ellipsis">默认排序</div></span></div>
+      </div>
       <div>
         <div class="van-dropdown-item van-dropdown-item--down" style="top: 0px; display: none;">
           <!---->
@@ -19,9 +21,11 @@ exports[`renders demo correctly 1`] = `
     </div>
   </div>
   <div>
-    <div class="van-dropdown-menu van-hairline--top-bottom">
-      <div role="button" tabindex="0" class="van-dropdown-menu__item"><span class="van-dropdown-menu__title"><div class="van-ellipsis">全部商品</div></span></div>
-      <div role="button" tabindex="0" class="van-dropdown-menu__item"><span class="van-dropdown-menu__title"><div class="van-ellipsis">筛选</div></span></div>
+    <div class="van-dropdown-menu">
+      <div class="van-dropdown-menu__bar">
+        <div role="button" tabindex="0" class="van-dropdown-menu__item"><span class="van-dropdown-menu__title"><div class="van-ellipsis">全部商品</div></span></div>
+        <div role="button" tabindex="0" class="van-dropdown-menu__item"><span class="van-dropdown-menu__title"><div class="van-ellipsis">筛选</div></span></div>
+      </div>
       <div>
         <div class="van-dropdown-item van-dropdown-item--down" style="top: 0px; display: none;">
           <!---->
@@ -35,9 +39,11 @@ exports[`renders demo correctly 1`] = `
     </div>
   </div>
   <div>
-    <div class="van-dropdown-menu van-hairline--top-bottom">
-      <div role="button" tabindex="0" class="van-dropdown-menu__item"><span class="van-dropdown-menu__title"><div class="van-ellipsis">全部商品</div></span></div>
-      <div role="button" tabindex="0" class="van-dropdown-menu__item"><span class="van-dropdown-menu__title"><div class="van-ellipsis">默认排序</div></span></div>
+    <div class="van-dropdown-menu">
+      <div class="van-dropdown-menu__bar">
+        <div role="button" tabindex="0" class="van-dropdown-menu__item"><span class="van-dropdown-menu__title"><div class="van-ellipsis">全部商品</div></span></div>
+        <div role="button" tabindex="0" class="van-dropdown-menu__item"><span class="van-dropdown-menu__title"><div class="van-ellipsis">默认排序</div></span></div>
+      </div>
       <div>
         <div class="van-dropdown-item van-dropdown-item--down" style="top: 0px; display: none;">
           <!---->
@@ -51,9 +57,11 @@ exports[`renders demo correctly 1`] = `
     </div>
   </div>
   <div>
-    <div class="van-dropdown-menu van-hairline--top-bottom">
-      <div role="button" tabindex="0" class="van-dropdown-menu__item"><span class="van-dropdown-menu__title van-dropdown-menu__title--down"><div class="van-ellipsis">全部商品</div></span></div>
-      <div role="button" tabindex="0" class="van-dropdown-menu__item"><span class="van-dropdown-menu__title van-dropdown-menu__title--down"><div class="van-ellipsis">默认排序</div></span></div>
+    <div class="van-dropdown-menu">
+      <div class="van-dropdown-menu__bar">
+        <div role="button" tabindex="0" class="van-dropdown-menu__item"><span class="van-dropdown-menu__title van-dropdown-menu__title--down"><div class="van-ellipsis">全部商品</div></span></div>
+        <div role="button" tabindex="0" class="van-dropdown-menu__item"><span class="van-dropdown-menu__title van-dropdown-menu__title--down"><div class="van-ellipsis">默认排序</div></span></div>
+      </div>
       <div>
         <div class="van-dropdown-item van-dropdown-item--up" style="bottom: 0px; display: none;">
           <!---->
@@ -67,9 +75,11 @@ exports[`renders demo correctly 1`] = `
     </div>
   </div>
   <div>
-    <div class="van-dropdown-menu van-hairline--top-bottom">
-      <div role="button" tabindex="-1" class="van-dropdown-menu__item van-dropdown-menu__item--disabled"><span class="van-dropdown-menu__title"><div class="van-ellipsis">全部商品</div></span></div>
-      <div role="button" tabindex="-1" class="van-dropdown-menu__item van-dropdown-menu__item--disabled"><span class="van-dropdown-menu__title"><div class="van-ellipsis">默认排序</div></span></div>
+    <div class="van-dropdown-menu">
+      <div class="van-dropdown-menu__bar">
+        <div role="button" tabindex="-1" class="van-dropdown-menu__item van-dropdown-menu__item--disabled"><span class="van-dropdown-menu__title"><div class="van-ellipsis">全部商品</div></span></div>
+        <div role="button" tabindex="-1" class="van-dropdown-menu__item van-dropdown-menu__item--disabled"><span class="van-dropdown-menu__title"><div class="van-ellipsis">默认排序</div></span></div>
+      </div>
       <div>
         <div class="van-dropdown-item van-dropdown-item--down" style="top: 0px; display: none;">
           <!---->
diff --git a/src/dropdown-menu/test/__snapshots__/index.spec.js.snap b/src/dropdown-menu/test/__snapshots__/index.spec.js.snap
index c1293ee48..54bdfdd48 100644
--- a/src/dropdown-menu/test/__snapshots__/index.spec.js.snap
+++ b/src/dropdown-menu/test/__snapshots__/index.spec.js.snap
@@ -1,9 +1,11 @@
 // Jest Snapshot v1, https://goo.gl/fbAQLP
 
 exports[`click option 1`] = `
-<div class="van-dropdown-menu van-hairline--top-bottom">
-  <div role="button" tabindex="0" class="van-dropdown-menu__item"><span class="van-dropdown-menu__title"><div class="van-ellipsis">B</div></span></div>
-  <div role="button" tabindex="0" class="van-dropdown-menu__item"><span class="van-dropdown-menu__title"><div class="van-ellipsis">B</div></span></div>
+<div class="van-dropdown-menu">
+  <div class="van-dropdown-menu__bar van-dropdown-menu__bar--opened">
+    <div role="button" tabindex="0" class="van-dropdown-menu__item"><span class="van-dropdown-menu__title"><div class="van-ellipsis">B</div></span></div>
+    <div role="button" tabindex="0" class="van-dropdown-menu__item"><span class="van-dropdown-menu__title"><div class="van-ellipsis">B</div></span></div>
+  </div>
   <div>
     <div class="van-dropdown-item van-dropdown-item--down" style="top: 0px;">
       <div class="van-overlay" style="z-index: 2013; animation-duration: 0.2s; position: absolute;" name="van-fade"></div>
@@ -28,9 +30,11 @@ exports[`click option 1`] = `
 `;
 
 exports[`close-on-click-outside 1`] = `
-<div class="van-dropdown-menu van-hairline--top-bottom">
-  <div role="button" tabindex="0" class="van-dropdown-menu__item"><span class="van-dropdown-menu__title"><div class="van-ellipsis">A</div></span></div>
-  <div role="button" tabindex="0" class="van-dropdown-menu__item"><span class="van-dropdown-menu__title"><div class="van-ellipsis">A</div></span></div>
+<div class="van-dropdown-menu">
+  <div class="van-dropdown-menu__bar van-dropdown-menu__bar--opened">
+    <div role="button" tabindex="0" class="van-dropdown-menu__item"><span class="van-dropdown-menu__title"><div class="van-ellipsis">A</div></span></div>
+    <div role="button" tabindex="0" class="van-dropdown-menu__item"><span class="van-dropdown-menu__title"><div class="van-ellipsis">A</div></span></div>
+  </div>
   <div>
     <div class="van-dropdown-item van-dropdown-item--down" style="top: 0px;">
       <div class="van-popup van-popup--top van-dropdown-item__content" style="transition-duration: 0.2s; display: none;" name="van-popup-slide-top">
@@ -54,8 +58,10 @@ exports[`close-on-click-outside 1`] = `
 `;
 
 exports[`destroy one item 1`] = `
-<div class="van-dropdown-menu van-hairline--top-bottom">
-  <div role="button" tabindex="0" class="van-dropdown-menu__item"><span class="van-dropdown-menu__title"><div class="van-ellipsis">A</div></span></div>
+<div class="van-dropdown-menu">
+  <div class="van-dropdown-menu__bar">
+    <div role="button" tabindex="0" class="van-dropdown-menu__item"><span class="van-dropdown-menu__title"><div class="van-ellipsis">A</div></span></div>
+  </div>
   <!---->
   <div>
     <div class="van-dropdown-item van-dropdown-item--down" style="top: 0px; display: none;">
@@ -66,9 +72,11 @@ exports[`destroy one item 1`] = `
 `;
 
 exports[`didn\`t find matched option 1`] = `
-<div class="van-dropdown-menu van-hairline--top-bottom">
-  <div role="button" tabindex="0" class="van-dropdown-menu__item"><span class="van-dropdown-menu__title"><div class="van-ellipsis"></div></span></div>
-  <div role="button" tabindex="0" class="van-dropdown-menu__item"><span class="van-dropdown-menu__title"><div class="van-ellipsis"></div></span></div>
+<div class="van-dropdown-menu">
+  <div class="van-dropdown-menu__bar">
+    <div role="button" tabindex="0" class="van-dropdown-menu__item"><span class="van-dropdown-menu__title"><div class="van-ellipsis"></div></span></div>
+    <div role="button" tabindex="0" class="van-dropdown-menu__item"><span class="van-dropdown-menu__title"><div class="van-ellipsis"></div></span></div>
+  </div>
   <div>
     <div class="van-dropdown-item van-dropdown-item--down" style="top: 0px; display: none;">
       <!---->
@@ -83,9 +91,11 @@ exports[`didn\`t find matched option 1`] = `
 `;
 
 exports[`direction up 1`] = `
-<div class="van-dropdown-menu van-hairline--top-bottom">
-  <div role="button" tabindex="0" class="van-dropdown-menu__item"><span class="van-dropdown-menu__title van-dropdown-menu__title--down"><div class="van-ellipsis">A</div></span></div>
-  <div role="button" tabindex="0" class="van-dropdown-menu__item"><span class="van-dropdown-menu__title van-dropdown-menu__title--down"><div class="van-ellipsis">A</div></span></div>
+<div class="van-dropdown-menu">
+  <div class="van-dropdown-menu__bar">
+    <div role="button" tabindex="0" class="van-dropdown-menu__item"><span class="van-dropdown-menu__title van-dropdown-menu__title--down"><div class="van-ellipsis">A</div></span></div>
+    <div role="button" tabindex="0" class="van-dropdown-menu__item"><span class="van-dropdown-menu__title van-dropdown-menu__title--down"><div class="van-ellipsis">A</div></span></div>
+  </div>
   <div>
     <div class="van-dropdown-item van-dropdown-item--up" style="bottom: 0px; display: none;">
       <!---->
@@ -100,9 +110,11 @@ exports[`direction up 1`] = `
 `;
 
 exports[`direction up 2`] = `
-<div class="van-dropdown-menu van-hairline--top-bottom">
-  <div role="button" tabindex="0" class="van-dropdown-menu__item"><span class="van-dropdown-menu__title van-dropdown-menu__title--active"><div class="van-ellipsis">A</div></span></div>
-  <div role="button" tabindex="0" class="van-dropdown-menu__item"><span class="van-dropdown-menu__title van-dropdown-menu__title--down"><div class="van-ellipsis">A</div></span></div>
+<div class="van-dropdown-menu">
+  <div class="van-dropdown-menu__bar van-dropdown-menu__bar--opened">
+    <div role="button" tabindex="0" class="van-dropdown-menu__item"><span class="van-dropdown-menu__title van-dropdown-menu__title--active"><div class="van-ellipsis">A</div></span></div>
+    <div role="button" tabindex="0" class="van-dropdown-menu__item"><span class="van-dropdown-menu__title van-dropdown-menu__title--down"><div class="van-ellipsis">A</div></span></div>
+  </div>
   <div>
     <div class="van-dropdown-item van-dropdown-item--up" style="bottom: 1000px;">
       <div class="van-popup van-popup--bottom van-dropdown-item__content" style="transition-duration: 0.2s;" name="van-popup-slide-bottom">
@@ -126,9 +138,11 @@ exports[`direction up 2`] = `
 `;
 
 exports[`disable close-on-click-outside 1`] = `
-<div class="van-dropdown-menu van-hairline--top-bottom">
-  <div role="button" tabindex="0" class="van-dropdown-menu__item"><span class="van-dropdown-menu__title van-dropdown-menu__title--active van-dropdown-menu__title--down"><div class="van-ellipsis">A</div></span></div>
-  <div role="button" tabindex="0" class="van-dropdown-menu__item"><span class="van-dropdown-menu__title"><div class="van-ellipsis">A</div></span></div>
+<div class="van-dropdown-menu">
+  <div class="van-dropdown-menu__bar van-dropdown-menu__bar--opened">
+    <div role="button" tabindex="0" class="van-dropdown-menu__item"><span class="van-dropdown-menu__title van-dropdown-menu__title--active van-dropdown-menu__title--down"><div class="van-ellipsis">A</div></span></div>
+    <div role="button" tabindex="0" class="van-dropdown-menu__item"><span class="van-dropdown-menu__title"><div class="van-ellipsis">A</div></span></div>
+  </div>
   <div>
     <div class="van-dropdown-item van-dropdown-item--down" style="top: 0px;">
       <div class="van-popup van-popup--top van-dropdown-item__content" style="transition-duration: 0.2s;" name="van-popup-slide-top">
@@ -152,8 +166,10 @@ exports[`disable close-on-click-outside 1`] = `
 `;
 
 exports[`disable dropdown item 1`] = `
-<div class="van-dropdown-menu van-hairline--top-bottom">
-  <div role="button" tabindex="-1" class="van-dropdown-menu__item van-dropdown-menu__item--disabled"><span class="van-dropdown-menu__title"><div class="van-ellipsis">A</div></span></div>
+<div class="van-dropdown-menu">
+  <div class="van-dropdown-menu__bar">
+    <div role="button" tabindex="-1" class="van-dropdown-menu__item van-dropdown-menu__item--disabled"><span class="van-dropdown-menu__title"><div class="van-ellipsis">A</div></span></div>
+  </div>
   <div>
     <div class="van-dropdown-item van-dropdown-item--down" style="top: 0px; display: none;">
       <!---->
@@ -163,9 +179,11 @@ exports[`disable dropdown item 1`] = `
 `;
 
 exports[`render option icon 1`] = `
-<div class="van-dropdown-menu van-hairline--top-bottom">
-  <div role="button" tabindex="0" class="van-dropdown-menu__item"><span class="van-dropdown-menu__title van-dropdown-menu__title--active van-dropdown-menu__title--down"><div class="van-ellipsis">A</div></span></div>
-  <div role="button" tabindex="0" class="van-dropdown-menu__item"><span class="van-dropdown-menu__title"><div class="van-ellipsis">A</div></span></div>
+<div class="van-dropdown-menu">
+  <div class="van-dropdown-menu__bar van-dropdown-menu__bar--opened">
+    <div role="button" tabindex="0" class="van-dropdown-menu__item"><span class="van-dropdown-menu__title van-dropdown-menu__title--active van-dropdown-menu__title--down"><div class="van-ellipsis">A</div></span></div>
+    <div role="button" tabindex="0" class="van-dropdown-menu__item"><span class="van-dropdown-menu__title"><div class="van-ellipsis">A</div></span></div>
+  </div>
   <div>
     <div class="van-dropdown-item van-dropdown-item--down" style="top: 0px;">
       <div class="van-popup van-popup--top van-dropdown-item__content" style="transition-duration: 0.2s;" name="van-popup-slide-top">
@@ -191,9 +209,11 @@ exports[`render option icon 1`] = `
 `;
 
 exports[`show dropdown item 1`] = `
-<div class="van-dropdown-menu van-hairline--top-bottom">
-  <div role="button" tabindex="0" class="van-dropdown-menu__item"><span class="van-dropdown-menu__title van-dropdown-menu__title--active van-dropdown-menu__title--down"><div class="van-ellipsis">A</div></span></div>
-  <div role="button" tabindex="0" class="van-dropdown-menu__item"><span class="van-dropdown-menu__title"><div class="van-ellipsis">A</div></span></div>
+<div class="van-dropdown-menu">
+  <div class="van-dropdown-menu__bar van-dropdown-menu__bar--opened">
+    <div role="button" tabindex="0" class="van-dropdown-menu__item"><span class="van-dropdown-menu__title van-dropdown-menu__title--active van-dropdown-menu__title--down"><div class="van-ellipsis">A</div></span></div>
+    <div role="button" tabindex="0" class="van-dropdown-menu__item"><span class="van-dropdown-menu__title"><div class="van-ellipsis">A</div></span></div>
+  </div>
   <div>
     <div class="van-dropdown-item van-dropdown-item--down" style="top: 0px;">
       <div class="van-popup van-popup--top van-dropdown-item__content" style="transition-duration: 0.2s;" name="van-popup-slide-top">
@@ -217,9 +237,11 @@ exports[`show dropdown item 1`] = `
 `;
 
 exports[`show dropdown item 2`] = `
-<div class="van-dropdown-menu van-hairline--top-bottom">
-  <div role="button" tabindex="0" class="van-dropdown-menu__item"><span class="van-dropdown-menu__title"><div class="van-ellipsis">A</div></span></div>
-  <div role="button" tabindex="0" class="van-dropdown-menu__item"><span class="van-dropdown-menu__title van-dropdown-menu__title--active van-dropdown-menu__title--down"><div class="van-ellipsis">A</div></span></div>
+<div class="van-dropdown-menu">
+  <div class="van-dropdown-menu__bar van-dropdown-menu__bar--opened">
+    <div role="button" tabindex="0" class="van-dropdown-menu__item"><span class="van-dropdown-menu__title"><div class="van-ellipsis">A</div></span></div>
+    <div role="button" tabindex="0" class="van-dropdown-menu__item"><span class="van-dropdown-menu__title van-dropdown-menu__title--active van-dropdown-menu__title--down"><div class="van-ellipsis">A</div></span></div>
+  </div>
   <div>
     <div class="van-dropdown-item van-dropdown-item--down" style="top: 0px;">
       <div class="van-popup van-popup--top van-dropdown-item__content" style="transition-duration: 0s; display: none;" name="van-popup-slide-top">
@@ -252,9 +274,11 @@ exports[`show dropdown item 2`] = `
 `;
 
 exports[`show dropdown item 3`] = `
-<div class="van-dropdown-menu van-hairline--top-bottom">
-  <div role="button" tabindex="0" class="van-dropdown-menu__item"><span class="van-dropdown-menu__title"><div class="van-ellipsis">A</div></span></div>
-  <div role="button" tabindex="0" class="van-dropdown-menu__item"><span class="van-dropdown-menu__title"><div class="van-ellipsis">A</div></span></div>
+<div class="van-dropdown-menu">
+  <div class="van-dropdown-menu__bar van-dropdown-menu__bar--opened">
+    <div role="button" tabindex="0" class="van-dropdown-menu__item"><span class="van-dropdown-menu__title"><div class="van-ellipsis">A</div></span></div>
+    <div role="button" tabindex="0" class="van-dropdown-menu__item"><span class="van-dropdown-menu__title"><div class="van-ellipsis">A</div></span></div>
+  </div>
   <div>
     <div class="van-dropdown-item van-dropdown-item--down" style="top: 0px;">
       <div class="van-popup van-popup--top van-dropdown-item__content" style="transition-duration: 0s; display: none;" name="van-popup-slide-top">
@@ -287,9 +311,11 @@ exports[`show dropdown item 3`] = `
 `;
 
 exports[`title prop 1`] = `
-<div class="van-dropdown-menu van-hairline--top-bottom">
-  <div role="button" tabindex="0" class="van-dropdown-menu__item"><span class="van-dropdown-menu__title"><div class="van-ellipsis">Title</div></span></div>
-  <div role="button" tabindex="0" class="van-dropdown-menu__item"><span class="van-dropdown-menu__title"><div class="van-ellipsis">Title</div></span></div>
+<div class="van-dropdown-menu">
+  <div class="van-dropdown-menu__bar">
+    <div role="button" tabindex="0" class="van-dropdown-menu__item"><span class="van-dropdown-menu__title"><div class="van-ellipsis">Title</div></span></div>
+    <div role="button" tabindex="0" class="van-dropdown-menu__item"><span class="van-dropdown-menu__title"><div class="van-ellipsis">Title</div></span></div>
+  </div>
   <div>
     <div class="van-dropdown-item van-dropdown-item--down" style="top: 0px; display: none;">
       <!---->
@@ -304,10 +330,12 @@ exports[`title prop 1`] = `
 `;
 
 exports[`title slot 1`] = `
-<div class="van-dropdown-menu van-hairline--top-bottom">
-  <div role="button" tabindex="0" class="van-dropdown-menu__item"><span class="van-dropdown-menu__title"><div class="van-ellipsis">
+<div class="van-dropdown-menu">
+  <div class="van-dropdown-menu__bar">
+    <div role="button" tabindex="0" class="van-dropdown-menu__item"><span class="van-dropdown-menu__title"><div class="van-ellipsis">
             Custom Title
           </div></span></div>
+  </div>
   <div>
     <div class="van-dropdown-item van-dropdown-item--down" style="top: 0px; display: none;">
       <!---->
@@ -317,23 +345,27 @@ exports[`title slot 1`] = `
 `;
 
 exports[`toggle method 1`] = `
-<div class="van-dropdown-menu van-hairline--top-bottom">
-  <div role="button" tabindex="0" class="van-dropdown-menu__item"><span class="van-dropdown-menu__title van-dropdown-menu__title--active van-dropdown-menu__title--down"><div class="van-ellipsis"></div></span></div>
+<div class="van-dropdown-menu">
+  <div class="van-dropdown-menu__bar van-dropdown-menu__bar--opened">
+    <div role="button" tabindex="0" class="van-dropdown-menu__item"><span class="van-dropdown-menu__title van-dropdown-menu__title--active van-dropdown-menu__title--down"><div class="van-ellipsis"></div></span></div>
+  </div>
   <div>
     <div class="van-dropdown-item van-dropdown-item--down" style="top: 0px;">
-      <div class="van-overlay" style="z-index: 2017; animation-duration: 0s; position: absolute;" name="van-fade"></div>
-      <div class="van-popup van-popup--top van-dropdown-item__content" style="transition-duration: 0s; z-index: 2018;" name="van-popup-slide-top"></div>
+      <div class="van-overlay" style="z-index: 2015; animation-duration: 0s; position: absolute;" name="van-fade"></div>
+      <div class="van-popup van-popup--top van-dropdown-item__content" style="transition-duration: 0s; z-index: 2016;" name="van-popup-slide-top"></div>
     </div>
   </div>
 </div>
 `;
 
 exports[`toggle method 2`] = `
-<div class="van-dropdown-menu van-hairline--top-bottom">
-  <div role="button" tabindex="0" class="van-dropdown-menu__item"><span class="van-dropdown-menu__title"><div class="van-ellipsis"></div></span></div>
+<div class="van-dropdown-menu">
+  <div class="van-dropdown-menu__bar van-dropdown-menu__bar--opened">
+    <div role="button" tabindex="0" class="van-dropdown-menu__item"><span class="van-dropdown-menu__title"><div class="van-ellipsis"></div></span></div>
+  </div>
   <div>
     <div class="van-dropdown-item van-dropdown-item--down" style="top: 0px;">
-      <div class="van-popup van-popup--top van-dropdown-item__content" style="transition-duration: 0s; z-index: 2018; display: none;" name="van-popup-slide-top"></div>
+      <div class="van-popup van-popup--top van-dropdown-item__content" style="transition-duration: 0s; z-index: 2016; display: none;" name="van-popup-slide-top"></div>
     </div>
   </div>
 </div>
diff --git a/src/style/var.less b/src/style/var.less
index c9ef2784d..10e33c4e5 100644
--- a/src/style/var.less
+++ b/src/style/var.less
@@ -321,14 +321,14 @@
 @divider-content-right-width: 10%;
 
 // DropdownMenu
-@dropdown-menu-height: 50px;
+@dropdown-menu-height: 48px;
 @dropdown-menu-background-color: @white;
 @dropdown-menu-title-font-size: 15px;
 @dropdown-menu-title-text-color: @text-color;
 @dropdown-menu-title-active-text-color: @blue;
 @dropdown-menu-title-disabled-text-color: @gray-6;
 @dropdown-menu-title-padding: 0 @padding-xs;
-@dropdown-menu-title-line-height: 18px;
+@dropdown-menu-title-line-height: 22px;
 @dropdown-menu-option-active-color: @blue;
 @dropdown-menu-content-max-height: 80%;
 @dropdown-item-z-index: 10;