<div class="demo-section">

    <h3>Menu with images</h3>

    @(Html.Kendo().Menu()
          .Name("menuImages")
          .Items(items =>
          {
              items.Add().Text("Baseball")
                   .ImageUrl(Url.Content("~/Content/shared/icons/sports/baseball.png"))
                   .Items(children =>
                   {
                       children.Add().Text("Top News").ImageUrl(Url.Content("~/Content/shared/icons/16/star.png"));
                       children.Add().Text("Photo Galleries").ImageUrl(Url.Content("~/Content/shared/icons/16/photo.png"));
                       children.Add().Text("Videos Records").ImageUrl(Url.Content("~/Content/shared/icons/16/video.png"));
                       children.Add().Text("Radio Records").ImageUrl(Url.Content("~/Content/shared/icons/16/speaker.png"));
                   });

              items.Add().Text("Golf")
                   .ImageUrl(Url.Content("~/Content/shared/icons/sports/golf.png"))
                   .Items(children =>
                   {
                      children.Add().Text("Top News").ImageUrl(Url.Content("~/Content/shared/icons/16/star.png"));
                      children.Add().Text("Photo Galleries").ImageUrl(Url.Content("~/Content/shared/icons/16/photo.png"));
                      children.Add().Text("Videos Records").ImageUrl(Url.Content("~/Content/shared/icons/16/video.png"));
                      children.Add().Text("Radio Records").ImageUrl(Url.Content("~/Content/shared/icons/16/speaker.png"));
                   });

              items.Add().Text("Swimming")
                   .ImageUrl(Url.Content("~/Content/shared/icons/sports/swimming.png"))
                   .Items(children =>
                   {
                      children.Add().Text("Top News").ImageUrl(Url.Content("~/Content/shared/icons/16/star.png"));
                      children.Add().Text("Photo Galleries").ImageUrl(Url.Content("~/Content/shared/icons/16/photo.png"));
                   });

              items.Add().Text("Snowboarding")
                   .ImageUrl(Url.Content("~/Content/shared/icons/sports/snowboarding.png"))
                   .Items(children =>
                   {
                       children.Add().Text("Top News").ImageUrl(Url.Content("~/Content/shared/icons/16/star.png"));
                       children.Add().Text("Photo Galleries").ImageUrl(Url.Content("~/Content/shared/icons/16/photo.png"));
                   });
          })
    )
</div>

<div class="demo-section">

    <h3>Menu with sprites</h3>

    @(Html.Kendo().Menu()
          .Name("menuSprites")
          .Items(items =>
          {
              items.Add().Text("Brazil")
                   .SpriteCssClasses("brazilFlag")
                   .Items(children =>
                   {
                       children.Add().Text("History").SpriteCssClasses("historyIcon");
                       children.Add().Text("Geography").SpriteCssClasses("geographyIcon");
                   });
              
              items.Add().Text("India")
                   .SpriteCssClasses("indiaFlag")
                   .Items(children =>
                   {
                       children.Add().Text("History").SpriteCssClasses("historyIcon");
                       children.Add().Text("Geography").SpriteCssClasses("geographyIcon");
                   });
              
              items.Add().Text("Netherlands")
                   .SpriteCssClasses("netherlandsFlag")
                   .Items(children =>
                   {
                       children.Add().Text("History").SpriteCssClasses("historyIcon");
                       children.Add().Text("Geography").SpriteCssClasses("geographyIcon");
                   });
          })
    )

</div>

<style scoped>
    .demo-section {
        width: 500px;
    }
    .demo-section h3 {
        font-weight: normal;
        padding-bottom: 10px;
    }
    #menuSprites .k-sprite {
        background-image: url("@Url.Content("~/Content/shared/flags.png")");
    }
    .brazilFlag {
        background-position: 0 0;
    }
    .indiaFlag {
        background-position: 0 -32px;
    }
    .netherlandsFlag {
        background-position: 0 -64px;
    }
    .historyIcon {
        background-position: 0 -96px;
    }
    .geographyIcon {
        background-position: 0 -128px;
    }
</style>