diff --git a/data/theme/gnome-shell.css b/data/theme/gnome-shell.css
index ec4eabece..d2bd3da79 100644
--- a/data/theme/gnome-shell.css
+++ b/data/theme/gnome-shell.css
@@ -151,11 +151,11 @@ StScrollBar StButton#vhandle:active {
     box-shadow: inset 0px 2px 4px rgba(0,0,0,0.9);
 }
 
-.popup-sub-menu .popup-menu-item:ltr {
+.popup-sub-menu:scrolled .popup-menu-item:ltr {
     padding-right: 0em;
 }
 
-.popup-sub-menu .popup-menu-item:rtl {
+.popup-sub-menu:scrolled .popup-menu-item:rtl {
     padding-left: 0em;
 }
 
diff --git a/js/ui/popupMenu.js b/js/ui/popupMenu.js
index 5eba45f3a..5f8b999c2 100644
--- a/js/ui/popupMenu.js
+++ b/js/ui/popupMenu.js
@@ -1343,6 +1343,11 @@ const PopupSubMenu = new Lang.Class({
         this.actor.vscrollbar_policy =
             needsScrollbar ? Gtk.PolicyType.AUTOMATIC : Gtk.PolicyType.NEVER;
 
+        if (needsScrollbar)
+            this.actor.add_style_pseudo_class('scrolled');
+        else
+            this.actor.remove_style_pseudo_class('scrolled');
+
         // It looks funny if we animate with a scrollbar (at what point is
         // the scrollbar added?) so just skip that case
         if (animate && needsScrollbar)