[Solved] Sub-menu-items with MenuOrientation.Horizontal

[Nim]

Hello,

I'm creating a menu with the following code:

<%= Html.Telerik().Menu()
        .Name("menu")
        .Orientation(MenuOrientation.Horizontal)
        .HtmlAttributes(new { style = "margin: 5px 5px 0px 5px" })
        .Items(items => {
            items.Add().Text("Test A")
                               .HtmlAttributes(new { style = "width:100px" })
                              .Items(child =>{
                                  child.Add().Text("Test A.1 - Very Long sub-menu-item");
                                  child.Add().Text("Test A.2 - Very Long sub-menu-item");
                              });
            items.Add().Text("Test B")
                              .HtmlAttributes(new { style = "width:100px" });
            items.Add().Text("Test C")
                              .HtmlAttributes(new { style = "width:100px" });
            items.Add().Text("Test D")
                              .HtmlAttributes(new { style = "width:100px" });
        })
%>

When the sub-menu-items ("Test A.1 ..." and "Test A.2 ...") are shown, they cover the following menu-items "Test B" and "Test C". Therefore, I can't select "Test C" right after "Test A" sub-menu-items are shown.

I wonder if there is anyway, when menu is set to "horizontal", we may make the sub-menu-items to show on the left side (or right side) of the menu (rather than on top of the next menu item).

Many thanks!

[Atanas Korchev]

Hello Nim,

 Unfortunately this is not possible. Sub menus can be only vertical for the time being.

Regards,
Atanas Korchev
the Telerik team

[Nim]

Thank you for the reply.

Right now, because of the current limitation, I hesitate to add new sub-menu-items to the horizontal menu.
Is there any plan to add new options to address the subject concern?

Many thanks!

[Atanas Korchev]

Hello Nim,

I think there is some misunderstanding. I tried your configuration but I did not reproduce any overlapping. Find attached a screenshot showing how the menu looks. What am I missing? Please attach a screenshot showing hot it looks at your side.

Regards,
Atanas Korchev
the Telerik team

[Nim]

You have missed the option:

   .Orientation(MenuOrientation.Horizontal)

The subject issue occurs in horiztonal menu bar.  Let me know if you still have difficulty to reproduce the problem.

[Atanas Korchev]

Hello Nim,

 No, I haven't missed the horizontal orientation - as you can see from the screenshot the top menu is horizontal. The orientation setting is applied only for the top level items. I am sending a sample project for your reference.

 Could it be a conflict between the default Site.css which comes with a new ASP.NET MVC application and the fact that your menu's name is "menu"? Does it work if you change the Name() of your menu?

Regards,
Atanas Korchev
the Telerik team

[Nim]

Thank you for getting back to me.  You are right.

I have found the cause of the problem, which is the narrow layout of the page that pushes the menu items to show up like a vertical menu while all other setting remains horizontal.  The fix is to use MenuOrientation.Vertical rather than MenuOrientation.Horizontal at the beginning.

Many thanks for your assistance!