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.

Tsarl
  • 277
  • 8
  • 22

2 Answers2

1

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.

Community
  • 1
  • 1
Ann L.
  • 13,760
  • 5
  • 35
  • 66
  • Tried it but makes the 2nd menu appear in another line again. So far my CSS is pretty much the default generated with every new web application project in visual studio plus a CSS reset. – Tsarl Nov 01 '12 at 22:26
  • @Tsarl I've added a link to a post with a similar issue, with several suggestions in the answers and a further link to information about "liquid layouts". – Ann L. Nov 02 '12 at 11:26
  • That link really helped so I'm marking it as answer. Thanks a lot Ann. – Tsarl Nov 02 '12 at 12:10
0

While I may not see very good reason to do that, try styling the two with css - then enclose each with a div tag.

Meanwhile, Using a single menu item with its proper static, dynamic and sublevel values, u can accomplished same.

Duff
  • 1