CSS - how to display submenu options horizontally while maintaining spacing of horizontal main menu options

Question

I have a menu working fairly well but can't figure out how to make the 2nd level submenu display horizontally instead of vertically. The whole menu needs to be only 2 rows, so hovering over the top row should display the submenu options horizontally on the 2nd row. See it here live.

desired:

option1    option2    option3  
              |
           submenu_option1 submenu_option2

instead of:

option1    option2    option3
              |
           submenu_option1
              |
           submenu_option2

CSS:

ul.AspNet-Menu 
{
    position: relative;
}


ul.AspNet-Menu, 
ul.AspNet-Menu ul
{
    margin: 0;
    padding: 0;
    display: block;

}

ul.AspNet-Menu li
{
    position: relative;
    list-style: none;
    float: left;
}

ul.AspNet-Menu li a,
ul.AspNet-Menu li span
{
    display: block;
    text-decoration: none;
}

ul.AspNet-Menu ul
{
    visibility: hidden;   
    position: absolute;
}

ul.AspNet-Menu li:hover ul ul,
ul.AspNet-Menu li.AspNet-Menu-Hover ul ul
{
    visibility: hidden;
}

ul.AspNet-Menu li:hover ul,
ul.AspNet-Menu li li:hover ul,
ul.AspNet-Menu li li li:hover ul,
ul.AspNet-Menu li.AspNet-Menu-Hover ul,
ul.AspNet-Menu li li.AspNet-Menu-Hover ul,
ul.AspNet-Menu li li li.AspNet-Menu-Hover ul
{
    visibility: visible;
}

ul.AspNet-Menu li
{
    padding:2px 2px 2px 2px;
}   

HTML:

<div class="main-nav2" id="MainMenu"> 
    <div class="AspNet-Menu-Horizontal"> 
            <ul class="AspNet-Menu"> 
                <li class="AspNet-Menu-Item"> 
                    <a href="/CSSMenu/default.aspx"> 
                        <span> Main</span></a> 
                </li> 
                <li class="AspNet-Menu-Item"> 
                    <a href="/CSSMenu/Reports.aspx"> 
                        <span> Reports</span></a> 
                    <ul> 
                        <li class="AspNet-Menu-Item"> 
                            <a href="/CSSMenu/Snapshot.aspx"> 
                                Snapshot</a> 
                        </li> 
                        <li class="AspNet-Menu-Item"> 
                            <a href="/CSSMenu/Dashboard.aspx"> 
                                Dashboard</a> 
                        </li> 
                    </ul> 
                </li> 
                <li class="AspNet-Menu-Item"> 
                    <a href="/CSSMenu/Customer.aspx"> 
                        <span> Customer</span></a> 
                </li> 
            </ul> 
    </div> 
</div> 

I think it starts to fall apart here:

ul.AspNet-Menu ul
{
    visibility: hidden;   
    position: absolute;
}

where position is set to absolute. BTW, I'm using Asp.Net Menu control with CSSFriendlyAdapters.

Any tips or help would be greatly appreciated!

Thanks,

Terry

Answer 1

It looks to me like the submenu lis are floating as expected, but that the width of their parent ul is so narrow that they wrap to multiple lines. Firebug is telling me that the computed width of the submenu ul is only 71px, though I can't see where that is being set. Try just setting it explicitly wider.

Answer 2

ul.AspNet-Menu li { position: static; } and the nested ul will display horizontally. The nested ul is positioned absolute (taken out of the document flow). If you remove the position relative from its parent it will not stay confined within the li.