How to remove the white part between the menu items

I am trying to change the color the space between menu items.

Here is my style of the menu:

    <Style TargetType="Menu" x:Key="MenuTheme">
    <Setter Property="Background">
        <Setter.Value>
            <LinearGradientBrush>
                <GradientStop Color="Black" Offset="0"/>
                <GradientStop Color="LightSlateGray" Offset="0.5"/>
                <GradientStop Color="DarkGray" Offset="1"/>
            </LinearGradientBrush>
        </Setter.Value>
    </Setter>
</Style>
<Style TargetType="MenuItem" x:Key="MenuButtonTheme">
     <Setter Property="Foreground" Value="White"/>
     <Setter Property="VerticalAlignment" Value="Center"/>
    <Setter Property="HorizontalAlignment" Value="Center"/>
    <Setter Property="Header" Value="{Binding Name}"/>
    <Setter Property="StaysOpenOnClick" Value="True"/>

</Style>
<Style TargetType="MenuItem" x:Key="SubMenuItemTheme">
    <Setter Property="StaysOpenOnClick" Value="True"/>
    <Setter Property="Template">
        <Setter.Value>
            <ControlTemplate TargetType="{x:Type MenuItem}">
                <Popup IsOpen="{TemplateBinding IsSubmenuOpen}" >
                    <Border x:Name="Bd" Padding="0" BorderBrush="{TemplateBinding BorderBrush}" BorderThickness="{TemplateBinding BorderThickness}" Background="{TemplateBinding Background}" >
                        <ContentPresenter x:Name="ContentPresenter"  Content="{TemplateBinding Header}" Margin="{TemplateBinding Padding}"/>
                    </Border>
                </Popup>
            </ControlTemplate>
        </Setter.Value>
    </Setter>
    <Setter Property="Height" Value="30"/>
    <Setter Property="Margin" Value="0,-2,0,0"/>
    <Setter Property="BorderThickness" Value="0"/>
    <Setter Property="Header" Value="{Binding Name}"/>
    <Style.Triggers>
        <EventTrigger RoutedEvent="MouseEnter">
            <EventTrigger.Actions>
                <BeginStoryboard>
                    <Storyboard>
                        <ColorAnimation FillBehavior="Stop"
                                        Duration="0:0:3" 
                                        To="Green" 
                                        Storyboard.TargetProperty="(MenuItem.Background).(SolidColorBrush.Color)"/>
                    </Storyboard>
                </BeginStoryboard>
            </EventTrigger.Actions>
        </EventTrigger>
    </Style.Triggers>
</Style>

But if I'd remove the popup, the sub menu appears like this:

However this time I won't be able to remove the white part. How do I solve this?

Note that, I've looked all questions related to my problem and I still couldn't solve, I kindly want you to not mark up the question like this question's already asked.

        <Menu Grid.ColumnSpan="2" x:Name="menu" ItemsSource="{Binding menus}">
        <Menu.Resources>
            <Style TargetType="MenuItem" BasedOn="{StaticResource MenuButtonTheme}">
                <Setter Property="Height" Value="{Binding ElementName=menu, Path=ActualHeight}"/>
            </Style>
            <Style TargetType="Menu" BasedOn="{StaticResource MenuTheme}"/>
            <HierarchicalDataTemplate DataType="{x:Type self:MenuModel}" ItemsSource="{Binding MenuModels}">
                <HierarchicalDataTemplate.ItemContainerStyle>
                    <Style TargetType="MenuItem" BasedOn="{StaticResource SubMenuItemTheme}"/>
                </HierarchicalDataTemplate.ItemContainerStyle>
            </HierarchicalDataTemplate>
        </Menu.Resources>
    </Menu>

Edit: I've added the Menu XAML part.