What CSS rules does the Menu Server Control implement to renders as a horizonal menu?

Question

For the ASP.NET Menu Server Control whose RenderMode is set to "List", there is an "Orientation" property which decides whether the menu would render as a horizontal or a vertical menu. I have compared the two HTML source code and was unable to find out which part of the HTML/CSS code set the orientation of the menu(unordered list). Can anyone help?

Answer 1

Generally, (un)ordered lists are made to render horizontally by either floating the list items to the left:

li {
    float: left;
}

or by making them inline elements instead of block elements:

li {
    display: inline;
}

I don't know off the top of my head if this is the approach that Microsoft takes, but it's probably similar.

Answer 2

(ASP.NET 4)

Using the following code (two menus, one with vertical, one with horizontal orientation):

<asp:Menu runat="server">
    <Items>
        <asp:MenuItem Text="item1" />
        <asp:MenuItem Text="item2">
            <asp:MenuItem Text="item2.1" />
            <asp:MenuItem Text="item2.2" />
        </asp:MenuItem>
    </Items>
</asp:Menu>
<asp:Menu Orientation="Horizontal" runat="server">
    <Items>
        <asp:MenuItem Text="item1" />
        <asp:MenuItem Text="item2">
            <asp:MenuItem Text="item2.1" />
            <asp:MenuItem Text="item2.2" />
        </asp:MenuItem>
    </Items>
</asp:Menu>

This is what you see in Chrome's style inspector for the first (vertical):

And this for the second (horizontal):

So the difference is an inline {float: left} on menu item list items, like Cory Larson's first suggestion.