Submenu Popup Background to be Transparent - wpf

Question

How does one make the submenu popup holding box/border to be transparent?
I have styled menu and submenus. When one selects a menu item that has submenus, one sees a grey box around the styled selections. How can I style that?
At looking at the styling for a menu Menu Styles and Templates I have tried multiple style overrides for the controls Border, ScrollViewer and Stackpanel. I attempted to override colors.
<Menu.Resources>
<Style TargetType="Popup"><Setter Property="AllowsTransparency" Value="True" /></Style>
<Style TargetType="ScrollViewer"><Setter Property="Background" Value="Green" /></Style>
<Style TargetType="StackPanel"><Setter Property="Background" Value="Firebrick"/></Style>
<Style TargetType="Border"><Setter Property="Background" Value="Firebrick" /></Style>
<SolidColorBrush x:Key="MenuPopuBrush" Color="Firebrick" />
<SolidColorBrush x:Key=" BorderMediumColor" Color="Firebrick" />
</Menu.Resources>
Minimal Example
<Menu Foreground="Transparent">
<MenuItem Header="Item 1">
<MenuItem Header="Sub 1a" />
<MenuItem Header="Sub 1b"/>
</MenuItem>
</Menu>
In your example just change the popup color to red or transparent.

Answer 1

Not sure if it is the only way, but you could override the ControlTemplate for the MenuItem. Basic Example:
<Menu>
<MenuItem Header="Item 1">
<MenuItem.Template>
<ControlTemplate TargetType="MenuItem">
<Border Name="Border" >
<Grid>
<ContentPresenter Margin="6,3,6,3" ContentSource="Header" RecognizesAccessKey="True" />
<Popup Name="Popup" Placement="Bottom" IsOpen="{TemplateBinding IsSubmenuOpen}" AllowsTransparency="True" Focusable="False" PopupAnimation="Fade">
<Border Name="SubmenuBorder" SnapsToDevicePixels="True" Background="LightGray" BorderBrush="Transparent" BorderThickness="1" >
<StackPanel IsItemsHost="True" KeyboardNavigation.DirectionalNavigation="Cycle" />
</Border>
</Popup>
</Grid>
</Border>
<ControlTemplate.Triggers>
<Trigger Property="IsSuspendingPopupAnimation" Value="true">
<Setter TargetName="Popup" Property="PopupAnimation" Value="None"/>
</Trigger>
<Trigger Property="IsHighlighted" Value="true">
<Setter TargetName="Border" Property="Background" Value="LightGray"/>
<Setter TargetName="Border" Property="BorderBrush" Value="Transparent"/>
<Setter Property="Foreground" Value="Firebrick" />
</Trigger>
<Trigger Property="IsHighlighted" Value="False">
<Setter Property="Foreground" Value="Black" />
</Trigger>
<Trigger SourceName="Popup" Property="Popup.AllowsTransparency" Value="True">
<Setter TargetName="SubmenuBorder" Property="CornerRadius" Value="0,0,4,4"/>
<Setter TargetName="SubmenuBorder" Property="Padding" Value="0,0,0,3"/>
</Trigger>
<Trigger Property="IsEnabled" Value="False">
<Setter Property="Foreground" Value="DarkGray"/>
</Trigger>
</ControlTemplate.Triggers>
</ControlTemplate>
</MenuItem.Template>
<MenuItem Header="Sub 1a" />
<MenuItem Header="Sub 1b" />
</MenuItem>
</Menu>
You can now access the component parts and style individually.