HOW to Edit .v-menubar-popup CSS?

Flow
1

Hi guys,

Is there a way to edit the background of the .v-menubar-pop? Im stack for 2 days just by trying to edit the background.


        
        MenuBar settings = new MenuBar();
        settings.addStyleName("mymenubar");
        settings.addStyleName("custom-menu-popup");
        settings.addStyleName("user-drop-down-menu");
        final MenuBar.MenuItem settingsItem = settings.addItem("SAMPLE USER",
                VaadinIcons.USER,
                null);
        settingsItem.addItem("Edit Profile", menuCommand);
        settingsItem.addItem("Preferences", menuCommand);
        settingsItem.addSeparator();
        settingsItem.addItem("Sign Out", menuCommand);
        addComponent(settings);
		
		
		**** CSS ***** 
		
		.mymenubar {
      border: none;
      border-radius: 0;
      padding-top: 2px;
      -webkit-box-shadow: none;
      box-shadow: none;
      text-shadow: none;
      background: transparent;
      font-size: 11px;
      font-weight: 400;
      color: #fff;
  }
  
  .custom-menu-popup:before {
      /*padding: 3px 3px;*/
      border-radius: 4px;
      background-color: #166ed5;
      color: #474747;
      -webkit-box-shadow: 0 4px 10px 0 rgba(0, 0, 0, 0.1), 0 3px 5px 0 rgba(0, 0, 0, 0.05), 0 0 0 1px rgba(0, 0, 0, 0.09098);
      box-shadow: 0 4px 10px 0 rgba(0, 0, 0, 0.1), 0 3px 5px 0 rgba(0, 0, 0, 0.05), 0 0 0 1px rgba(0, 0, 0, 0.09098);
      -webkit-backface-visibility: hidden;
      -moz-backface-visibility: hidden;
      -ms-backface-visibility: hidden;
      backface-visibility: hidden;
      padding: 3px 3px;
      margin: 4px 0 0 1px !important;
  }
  
  .user-drop-down-menu {
      float: right;
  }

[image]
(https://ibb.co/cQxuKT)