Display a dropdown menu inside another one

customize.dist/src/less2/include/dropdown.less

@@ -43,7 +43,7 @@
                 display: block;
             }
 
-            a {
+            & > a, & > span {
                 color: @colortheme_dropdown-color;
                 padding: 5px 16px;
                 text-decoration: none;
@@ -75,6 +75,31 @@
                     color: @colortheme_dropdown-color;
                 }
             }
+            &> span {
+                box-sizing: border-box;
+                height: 26px;
+                border-radius: 0;
+                border: 0;
+                padding: 0 16px;
+                .cp-dropdown-content {
+                    margin-top: 26px;
+                    left: 0;
+                }
+                button {
+                    padding: 0;
+                    text-align: left;
+                    margin: 0;
+                    border-radius: 0;
+                    border: 0;
+                    width: 100%;
+                    line-height: 1em;
+                    .cp-toolbar-drawer-element {
+                        margin-left: 10px;
+                        display: inline;
+                        vertical-align: top;
+                    }
+                }
+            }
 
             hr {
                 margin: 5px 0px;

customize.dist/src/less2/include/toolbar.less

@@ -667,8 +667,9 @@
                 }
                 .cp-dropdown-content {
                     margin: 0;
+                    overflow: visible;
                 }
-                button {
+                & > button {
                     display: flex;
                     justify-content: center;
                     align-items: center;

www/common/common-ui-elements.js

@@ -679,9 +679,16 @@ define([
         };
         var $userAdmin = UIElements.createDropdown(dropdownConfigUser);
 
+        /*
+        // Uncomment these lines to have a language selector in the admin menu
+        // FIXME clicking on the inner menu hides the outer one
+        var $lang = UIElements.createLanguageSelector(Common);
+        $userAdmin.find('.cp-dropdown-content').append($lang);
+        */
+
         var $displayName = $userAdmin.find('.'+displayNameCls);
 
-        var $avatar = $userAdmin.find('.cp-dropdown-button-title');
+        var $avatar = $userAdmin.find('> button .cp-dropdown-button-title');
         var loadingAvatar;
         var to;
         var oldUrl = '';
@@ -700,10 +707,11 @@ define([
             $displayName.text(newName || Messages.anonymous);
             if (accountName && oldUrl !== url) {
                 $avatar.html('');
-                UIElements.displayAvatar(Common, $avatar, url, newName || Messages.anonymous, function ($img) {
+                UIElements.displayAvatar(Common, $avatar, url,
+                        newName || Messages.anonymous, function ($img) {
                     oldUrl = url;
                     if ($img) {
-                        $userAdmin.find('button').addClass('cp-avatar');
+                        $userAdmin.find('> button').addClass('cp-avatar');
                     }
                     loadingAvatar = false;
                 });

www/common/toolbar3.js

@@ -893,7 +893,7 @@ define([
             userMenuCfg.displayChangeName = 0;
         }*/
         Common.createUserAdminMenu(userMenuCfg);
-        $userAdmin.find('button').attr('title', Messages.userAccountButton);
+        $userAdmin.find('> button').attr('title', Messages.userAccountButton);
 
         var $userButton = toolbar.$userNameButton = $userAdmin.find('a.' + USERBUTTON_CLS);
         $userButton.click(function (e) {