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> 
                        &开发者_如何学编程lt;/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

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.

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.

This might help you out:
JQuery var activetab=null; $(document).ready(function() { $('#nav').children().each(function(){ $(this).addClass('off'); $(this).find(' > a').each(function(){ if(activetab == null){ activetab = $(this); $(this).parent().removeClass('off').addClass('on'); } $(this).click(function(){ if(activetab != null){ activetab.parent().removeClass('on').addClass('off'); } $(this).parent().removeClass('off').addClass('on'); activetab = $(this); return false; }); }); $(this).find(' > ul').each(function(){ var o = $('#nav').offset(); $(this).css('top',o.top+ 30).css('left',o.left).css('width',$('#nav').css('width')); $(this).find('li > a').each(function(){ $(this).click(function(){ var parentli = $(this).parent().parent().parent(); if(activetab != null){ activetab.parent().removeClass('on').addClass('off'); } parentli.removeClass('off').addClass('on'); activetab = $(this).parent().parent(); }); }); }); }); });
CSS:

*{margin:0;padding:0;}


divnav{width:800px;margin:40px auto;}

nav{background-color:#dde;height:30px;}

nav a {

text-decoration: none;
color:#444;
text-align:center;
}

nav a:hover{color:#e3004e;}

nav li { /float the main list items/

margin: 0;
float: left;
display: block;
margin: 0 10px;
}

nav li ul {

display: none;
}

nav li.off ul, #nav li.on ul  { /put the subnav below/

position:absolute;
padding-top: 5px;
background-color: #f2f2f2;
height:30px;
width:100%;
}

nav li.on ul {background-color: #f2f2f2;}

nav li a {font-weight: bold;display: block;padding: 5px;font-size:1.3em;}

nav li.on ul a, #nav li.off ul a {border: 0;float: left; /ie doesn't inherit the float/

width: auto;margin-right: 15px;}

nav li.on ul {display: block;}

nav li.off:hover ul, #nav li.over ul {display: block;z-index: 6000;}

nav > li{height:30;}

nav > li:hover{background-color:#edd;height:26px;}

nav > li.on{background-color:#edd;}

nav li.off ul a, #nav li.on ul a {display: block;background: #f2f2ff2;font-family: arial, verdana, sans-serif;font-size: small;}

HTML:

<div id="divnav"> 
    <ul id="nav"> 
    <li><a href="#"><span>Renaissance</span></a> 
    <ul> 
        <li><a href="#">Brunelleschi</a></li> 
        <li><a href="#">Alberti</a></li> 
        <li><a href="#">Palladio</a></li> 
        <li><a href="#">Michelangelo</a></li> 
        <li><a href="#">Bramante</a></li> 
    </ul></li> 
    <li><a href="#"><span>Art Nouveau</span></a> 
    <ul> 
        <li><a href="#">Mackintosh</a></li> 
        <li><a href="#">Guimard</a></li> 
        <li><a href="#">Horta</a></li> 
        <li><a href="#">van de Velde</a></li> 
    </ul></li> 
    <li><a href="#"><span>Modern</span></a> 
    <ul> 
        <li><a href="#">Sullivan</a></li> 
        <li><a href="#">Le Corbusier</a></li> 
        <li><a href="#">Mies</a></li> 
        <li><a href="#">Gropius</a></li> 
        <li><a href="#">Yamasaki</a></li> 
    </ul></li> 
    <li><a href="#"><span>Postmodern</span></a> 
    <ul> 
        <li><a href="#">Venturi</a></li> 
        <li><a href="#">Eisenman</a></li> 
        <li><a href="#">Stern</a></li> 
        <li><a href="#">Graves</a></li> 
        <li><a href="#">Gehry</a></li> 
    </ul></li> 
    <li><a href="#"><span>Digital</span></a> 
    <ul> 
        <li><a href="#">Xenakis</a></li> 
        <li><a href="#">Lynn</a></li> 
        <li><a href="#">Diller+Scofidio</a></li> 
        <li><a href="#">Zellner</a></li> 
        <li><a href="#">Hadid</a></li> 
    </ul></li> 
</ul>
</div>