Привязка Menu ItemsSource к рекурсивной структуре данных

У меня есть простая структура данных (свойства, конечно, являются свойствами зависимостей):

class MenuData{
    public string Header {get; protected set;}
    public ObservableCollection<MenuData> Items { get; protected set; }
}

ObservableCollection<MenuData> Menus {get; protected set;}

Я хочу связать свойство Menus как элемент ItemsSource меню. Результат должен выглядеть как стандартная строка меню Windows: элементы первого уровня будут выровнены по горизонтали, а подпункты скрыты в подменю.

Я поэкспериментировал с XAML, чтобы пока создать первый уровень (горизонтальная строка меню):

<my:MenuElement ItemsSource="{Binding Menus}">
    <my:MenuElement.ItemTemplate>
        <DataTemplate>                
            <MenuItem Header="{Binding Header}">                    
                <!-- Try to add some sub-menus to see what it is going to look like. -->
                <MenuItem Header="A" />
                <MenuItem Header="A" />
                <MenuItem Header="A" />
                <MenuItem Header="A" />
            </MenuItem>
        </DataTemplate>
    </my:MenuElement.ItemTemplate>
</my:MenuElement>

Я использовал свою собственную перегрузку MenuItem, потому что ItemTemplate уже заключен в тег MenuItem для элемента Menu, поэтому мне пришлось избавиться от этого:

class MenuElement: System.Windows.Controls.Menu 
{
    protected override DependencyObject GetContainerForItemOverride()
    {
        return new System.Windows.Controls.ContentPresenter();
    }
}

Но результат выглядит неправильно (обратите внимание на то, что выделение слишком большое, а стрелки подменю)

Не могли бы вы указать мне правильное направление, чтобы я мог это сделать?

Спасибо за любую помощь.