Home/ Questions/Q 8778399
In Process

The Archive Base Latest Questions

Editorial Team
  • 0
Asked: 2026-06-13T19:31:43+00:00

I am trying to add a 2nd menu control in the same line with

  • 0

I am trying to add a 2nd menu control in the same line with an existing one but I can’t manage to do it. 

<div class="clear hideSkiplink">
            <asp:Menu ID="NavigationMenu" runat="server" CssClass="menu" EnableViewState="false" IncludeStyleBlock="false" Orientation="Horizontal">
                <Items>
                    <asp:MenuItem NavigateUrl="~/Default.aspx" Text="Home"/>
                    <asp:MenuItem NavigateUrl="~/About.aspx" Text="About"/>
                </Items>
            </asp:Menu>
            <asp:Menu ID="SmallMenu" runat="server" CssClass="smallMenu" EnableViewState="false" IncludeStyleBlock="false" Orientation="Horizontal">
                <Items>
                    <asp:MenuItem NavigateUrl="~/Settings.aspx" Text="Settings"/>
                    <asp:MenuItem NavigateUrl="~/Admin.aspx" Text="Admin"/>
                </Items>
            </asp:Menu>
        </div>

Tried to format it using CSS but it’s not working. The 2nd menu appears in a new line. What am I doing wrong here?

div.menu
{
    padding: 4px 0px 4px 8px;
    float:left;
    width:500px;
}

div.smallMenu
{
    padding: 4px 8px 4px 0px;
    width: 300px;
    float: right;
}

EDIT: I can make them appear in the same line if I put them inside divs and float the 2nd one to the right but now half the right menu appears to the right (outside) of the page.

Share

Leave an answer

You must login to add an answer.

Need An Account,

1 Answer

  1. Editorial Team

    This sounds like something you’ll have to debug using your browser’s client-side debugging tools. It sounds from what you describe (the splitting of the right-hand menu) as if something higher up in the CSS inheritence hierarchy is affecting the positioning of that DIV.

    One other thing you could try would be further nesting of the menus:

    <DIV>
  <DIV style="float:left;">
     <DIV style="float:right;">
        <asp:Menu />
     </DIV>
     <asp:Menu />
  </DIV>
</DIV>

    ETA: Here’s a post with a similar issue. The top 2 answers (7 and 5 points, respectively, as of this writing) have some things you could try and some further links.

    • 0