Change the menuItems look - wpf

Question

Currently I have a menu which looks like the image below.
I want to get rid of the white bounding box so that it looks like the image below.
When I mouseOver any Item in the menu it looks like :
But when I mouseOver the any sub-Item it looks like Item Delete in first image. I want it look like menuItem Masters in the third image.
For menuItem and its subItems I am using same style. The XAML is :
<Window .....>
<Window.Resources>
<Storyboard x:Key="mnuItems_MouseEnter">
<ColorAnimationUsingKeyFrames Storyboard.TargetProperty="(TextElement.Foreground).(SolidColorBrush.Color)" >
<EasingColorKeyFrame KeyTime="0:0:0.2" Value="DeepSkyBlue"/>
</ColorAnimationUsingKeyFrames>
</Storyboard>
<Storyboard x:Key="mnuItems_MouseLeave">
<ColorAnimationUsingKeyFrames Storyboard.TargetProperty="(TextElement.Foreground).(SolidColorBrush.Color)" >
<EasingColorKeyFrame KeyTime="0:0:0.2" Value="White"/>
</ColorAnimationUsingKeyFrames>
</Storyboard>
<Style x:Key="mnuItems_Style" TargetType="MenuItem">
<Style.Triggers>
<EventTrigger RoutedEvent="Mouse.MouseEnter">
<EventTrigger.Actions>
<BeginStoryboard x:Name="mnuItems_MouseEnter_BeginStoryBoard" Storyboard="{StaticResource mnuItems_MouseEnter}" />
</EventTrigger.Actions>
</EventTrigger>
<EventTrigger RoutedEvent="Mouse.MouseLeave">
<EventTrigger.Actions>
<BeginStoryboard x:Name="mnuItems_MouseLeave_BeginStoryBoard" Storyboard="{StaticResource mnuItems_MouseLeave}" />
</EventTrigger.Actions>
</EventTrigger>
</Style.Triggers>
</Style>
</Window.Resources>
<Grid>
<Menu x:Name="MainMenu" Height="37" Margin="127,28,188,0" VerticalAlignment="Top" Background="{x:Null}">
<MenuItem x:Name="mnuCompany" Header="Company" FontSize="21.333" Foreground="White" Style="{StaticResource mnuItems_Style}" />
<MenuItem x:Name="mnuCreateCompany" Header="Create" FontSize="21.333" Foreground="White" Style="{StaticResource mnuItems_Style}" Background="#FF333333">
<MenuItem x:Name="mnuEditCompany" Header="Edit" FontSize="21.333" Foreground="White" Style="{StaticResource mnuItems_Style}" Background="#FF333333"/>
<MenuItem x:Name="mnuDeleteCompany" Header="Delete" FontSize="21.333" Foreground="White" Style="{StaticResource mnuItems_Style}" Background="#FF333333"/>
<MenuItem x:Name="mnuExit" Header="Exit" FontSize="21.333" Foreground="White" Style="{StaticResource mnuItems_Style}" Background="#FF333333"/>
</MenuItem>
<MenuItem x:Name="mnuMasters" Header="Masters" FontSize="21.333" Foreground="White" Style="{StaticResource mnuItems_Style}"/>
<MenuItem x:Name="mnuTransactions" Header="Transactions" FontSize="21.333" Foreground="White" Style="{StaticResource mnuItems_Style}"/>
<MenuItem x:Name="mnuReports" Header="Reports" FontSize="21.333" Foreground="White" Style="{StaticResource mnuItems_Style}"/>
<MenuItem x:Name="mnuSettings" Header="Settings" FontSize="21.333" Foreground="White" Style="{StaticResource mnuItems_Style}"/>
</Menu>
</Grid>
</Window>
Edit :
At Design Time.
At Runtime :

Answer 1

Hi you need to edit template of MenuItem.I edited style of MenuItem and this will point to right direction.change this Template based on your requirement.
XAMl
<Grid.Resources>
<Style TargetType="{x:Type MenuItem}">
<Setter Property="Template">
<Setter.Value>
<ControlTemplate TargetType="{x:Type MenuItem}">
<Grid SnapsToDevicePixels="true">
<DockPanel>
<ContentPresenter x:Name="Icon" ContentSource="Icon" Margin="4,0,6,0" SnapsToDevicePixels="{TemplateBinding SnapsToDevicePixels}" VerticalAlignment="Center"/>
<Path x:Name="GlyphPanel" Fill="{TemplateBinding Foreground}" FlowDirection="LeftToRight" Margin="7,0,0,0" Visibility="Collapsed" VerticalAlignment="Center"/>
<ContentPresenter x:Name="content" ContentSource="Header" Margin="{TemplateBinding Padding}" RecognizesAccessKey="True" SnapsToDevicePixels="{TemplateBinding SnapsToDevicePixels}"/>
</DockPanel>
<Popup x:Name="PART_Popup" AllowsTransparency="true" Focusable="false" HorizontalOffset="1" IsOpen="{Binding IsSubmenuOpen, RelativeSource={RelativeSource TemplatedParent}}" PopupAnimation="{DynamicResource {x:Static SystemParameters.MenuPopupAnimationKey}}" Placement="Bottom" VerticalOffset="-1">
<Border BorderThickness="2" BorderBrush="White" Background="{TemplateBinding Background}">
<ScrollViewer x:Name="SubMenuScrollViewer" CanContentScroll="true" Style="{DynamicResource {ComponentResourceKey ResourceId=MenuScrollViewer, TypeInTargetAssembly={x:Type FrameworkElement}}}">
<Grid RenderOptions.ClearTypeHint="Enabled">
<ItemsPresenter x:Name="ItemsPresenter" KeyboardNavigation.DirectionalNavigation="Cycle" Grid.IsSharedSizeScope="true" Margin="2" SnapsToDevicePixels="{TemplateBinding SnapsToDevicePixels}" KeyboardNavigation.TabNavigation="Cycle"/>
</Grid>
</ScrollViewer>
</Border>
</Popup>
</Grid>
<ControlTemplate.Triggers>
<Trigger Property="IsMouseOver" Value="True">
<Setter Property="TextBlock.Foreground" Value="Blue" TargetName="content"/>
</Trigger>
</ControlTemplate.Triggers>
</ControlTemplate>
</Setter.Value>
</Setter>
</Style>
</Grid.Resources>

Answer 2

The above Template working fine for me when setting Image like(see my xaml),How you are setting Menu Icon ?
XAML
<MenuItem Header="Create">
<MenuItem.Icon>
<Viewbox >
<Path Data="M19.833,0L32.5,0 32.5,19.833999 52.334,19.833999 52.334,32.500999 32.5,32.500999 32.5,52.333 19.833,52.333 19.833,32.500999 0,32.500999 0,19.833999 19.833,19.833999z" Stretch="Uniform" Fill="#FFFFFFFF" Width="12" Height="12" Margin="0,0,0,0" RenderTransformOrigin="0.5,0.5">
<Path.RenderTransform>
<TransformGroup>
<TransformGroup.Children>
<RotateTransform Angle="180" />
<ScaleTransform ScaleX="-1" ScaleY="-1" />
</TransformGroup.Children>
</TransformGroup>
</Path.RenderTransform>
</Path>
</Viewbox>
</MenuItem.Icon>
</MenuItem>