diff --git a/ionic/components/menu/menu.scss b/ionic/components/menu/menu.scss
index 9bf48a9441..234d22916e 100644
--- a/ionic/components/menu/menu.scss
+++ b/ionic/components/menu/menu.scss
@@ -27,7 +27,7 @@ ion-menu[side=right] {
   left: auto;
 }
 
-ion-menu backdrop {
+ion-menu .backdrop {
   z-index: -1;
   display: none;
 }
@@ -73,7 +73,7 @@ ion-menu[type=overlay] {
   z-index: $z-index-menu-overlay;
   left: -8px; // make up for the box-shadow hanging over on the left
 
-  backdrop {
+  .backdrop {
     display: block;
     transform: translate3d(-9999px, 0px, 0px);
     opacity: 0.01;
diff --git a/ionic/components/menu/menu.ts b/ionic/components/menu/menu.ts
index db383a9038..19d6809866 100644
--- a/ionic/components/menu/menu.ts
+++ b/ionic/components/menu/menu.ts
@@ -66,7 +66,7 @@ import * as gestures from  './menu-gestures';
     '[attr.side]': 'side',
     '[attr.type]': 'type'
   },
-  template: '<ng-content></ng-content><backdrop tappable disable-activated></backdrop>',
+  template: '<ng-content></ng-content><div tappable disable-activated class="backdrop"></div>',
   directives: [forwardRef(() => MenuBackdrop)]
 })
 export class Menu extends Ion {
@@ -366,7 +366,7 @@ let menuTypes = {};
 
 
 @Directive({
-  selector: 'backdrop',
+  selector: '.backdrop',
   host: {
     '(click)': 'clicked($event)'
   }