菜单控件在环境之间以不同方式构建和呈现

Question

I put the following Menu control on my page:

<div class="Phase2MenuContainer">
    <asp:Menu runat="server" ID="mnuHome" Orientation="Vertical"
        StaticMenuStyle-CssClass="Phase2Menu">
        <Items>
            <asp:MenuItem Selectable="true" Text="Download Sketch Sheet" NavigateUrl="~/Documents/Sketch Sheet.pdf" Target="_blank"></asp:MenuItem>
            <asp:MenuItem Selectable="true" Text="Create Data Sheet" NavigateUrl="CreateDataSheet.aspx"></asp:MenuItem>
            <asp:MenuItem Selectable="true" Text="Personalize Data" NavigateUrl="Personalize.aspx" Enabled="false"></asp:MenuItem>
        </Items>
    </asp:Menu>
</div>

When I run this on my localhost, it builds with tables which is fine because I knew this when I wrote my css.

The problem here is that when I copied it to the live environment, it builds with spans and divs, so all my css broke.

Here's the css (the live copy just removes the margin: 5px 0; lines)

.Phase2MenuContainer
{
    width: 250px;
    margin: 15px auto;
}
.Phase2Menu a, .Phase2Menu span a
{
    display: block;
    padding: 10px;
    margin: 5px 0;
    color: #fff;
    height: 30px;
    line-height: 30px;
    width: 200px;
    background: #018CD2;
    border: 1px solid #0159a0;
}
.Phase2Menu a[disabled=true], .Phase2Menu span[disabled=disabled]
{
    display: block;
    padding: 10px;
    margin: 5px 0;
    color: #fff;
    height: 30px;
    line-height: 30px;
    width: 200px;    
    background: #c1c1c1;
    border: 1px solid #0159a0;
}
.Phase2Menu a:not([disabled=true]):hover
{
    background: #3B3486;
}

It took me about half an hour to fix it , but I got it working now (although the live stylesheet is different to my test one).

Can anyone explain to me why the menu built differently between my localhost and the live server? I'm sure this shouldn't actually happen if it's been done correctly...

Answer 1

Set the RenderingMode of Menu To Table ..like this. So it will always render your Menu as table...

<asp:Menu runat="server" ID="mnuHome" Orientation="Vertical" RenderingMode="Table"
        StaticMenuStyle-CssClass="Phase2Menu">

Answer 2

I have faced the same solution two days ago and unfortunately, RenderingMode was not working in my project, because of ASP.NET supported version. Therefore, as a alternative solution, I put menu in div control and set the style sheet as below.

.div br {
    display: none;
}

Hope this may helpful.