[Solved] Menu style

[Gabe]

If I try to customize a style for a menu its seems to work fine in all browsers except  IE in compatibility mode, the menu opens up beneath my jqueryui tabs div. Not sure why, but I even tried to add a z-index value to my #actionmenu definition but that didn't resolve this. Why is this happening ?

Here is how I am trying to customize the menu...

<div id="actionmenu" class="t-rtl">
    @(Html.Telerik().Menu()
        .Name("Menu")
        .HtmlAttributes(new { style = "width: 90px" })
        .BindTo(Model.Menu, mappings =>
        {
            mappings.For<MenuModel>(binding => binding
                     .ItemDataBound((item, menu) =>
                     {
                         item.Text = menu.Text;
                         item.ImageUrl = Url.Content(String.Format("~/Content/images/{0}", menu.Image));
                         item.HtmlAttributes.Add("style", "width: 90px; border: 0;");
                         
                     })
 
                     .Children(menu => menu.Items));
            mappings.For<MenuItemModel>(binding => binding
                    .ItemDataBound((item, menuitem) =>
                    {
                        item.Text = menuitem.Text;
                        item.Url = menuitem.Url;
                        item.LinkHtmlAttributes.Add("target", "_blank");
                    }));
        })
        )
</div>
<div class="pagecontainer">

// jqueryui tabs here

</div>

#actionmenu
{
    background-image: url('images/ui-bg_highlight-hard_55_15428b_1x100.png');
    background-position: 50% 50%;
    margin-right: 8px; 
    width: 100px; 
    float: right;
}
 
#actionmenu .t-widget
{
    border: 0;
    background-color: transparent;
}

[Atanas Korchev]

Hi Gabe,

 You can try adding z-index to the menu itself

#Menu
{
   z-index: 100;
}

If this does not help I would ask you to send us a runnable project which we can check locally.

Regards,
Atanas Korchev
the Telerik team