CSS - как отображать опции подменю по горизонтали, сохраняя интервал между горизонтальными опциями главного меню

Question

У меня меню работает довольно хорошо, но я не могу понять, как сделать, чтобы подменю 2-го уровня отображалось горизонтально, а не вертикально. Всего меню должно быть только 2 строки, поэтому при наведении на верхний ряд должны отображаться опции подменю по горизонтали во 2-м ряду. Смотрите здесь в прямом эфире.

желательно:

option1    option2    option3  
              |
           submenu_option1 submenu_option2

вместо:

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> 

Я думаю, это начинает разваливаться здесь:

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

где положение установлено на абсолютное значение. Кстати, я использую Asp.Net Menu Control с CSSFriendlyAdapters.

Любые советы или помощь будет принята с благодарностью!

Спасибо

Терри

Answer 1

ul.AspNet-Menu li {position: static; } и вложенный ul будет отображаться горизонтально. Вложенный ul позиционируется как абсолютный (исключается из потока документов). Если вы удалите положение относительно своего родителя, оно не останется в пределах li.

Answer 2

Это может помочь вам:
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;}</p> <h1>divnav{width:800px;margin:40px auto;}</h1> <h1>nav{background-color:#dde;height:30px;}</h1> <h1>nav a {</h1> <p>text-decoration: none; color:#444; text-align:center; }</p> <h1>nav a:hover{color:#e3004e;}</h1> <h1>nav li { /<em>float the main list items</em>/</h1> <p>margin: 0; float: left; display: block; margin: 0 10px; }</p> <h1>nav li ul {</h1> <p>display: none; }</p> <h1>nav li.off ul, #nav li.on ul { /<em>put the subnav below</em>/</h1> <p>position:absolute; padding-top: 5px; background-color: #f2f2f2; height:30px; width:100%; }</p> <h1>nav li.on ul {background-color: #f2f2f2;}</h1> <h1>nav li a {font-weight: bold;display: block;padding: 5px;font-size:1.3em;}</h1> <h1>nav li.on ul a, #nav li.off ul a {border: 0;float: left; /<em>ie doesn't inherit the float</em>/</h1> <p>width: auto;margin-right: 15px;}</p> <h1>nav li.on ul {display: block;}</h1> <h1>nav li.off:hover ul, #nav li.over ul {display: block;z-index: 6000;}</h1> <h1>nav > li{height:30;}</h1> <h1>nav > li:hover{background-color:#edd;height:26px;}</h1> <h1>nav > li.on{background-color:#edd;}</h1> <h1>nav li.off ul a, #nav li.on ul a {display: block;background: #f2f2ff2;font-family: arial, verdana, sans-serif;font-size: small;}</h1> <p>

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>

Answer 3

Мне кажется, что подменю li с плавающей точкой, как и ожидалось, но ширина их родительских ul настолько узка, что они переносятся на несколько строк Firebug говорит мне, что вычисленная ширина подменю ul составляет всего 71 пиксель, хотя я не вижу, где это устанавливается. Попробуйте просто установить его явно шире.