css - CSS - 如何在保持水平主菜单选项间距的同时水平显示子菜单选项

Question

我有一个运行良好的菜单，但不知道如何使第二级子菜单水平显示而不是垂直显示。整个菜单只需要 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;
}

其中位置设置为绝对。顺便说一句，我正在使用带有 CSSFriendlyAdapters 的 Asp.Net 菜单控件。

任何提示或帮助将不胜感激！

谢谢，

特里

Answer 1

ul.AspNet-Menu li { 位置：静态；} 并且嵌套的 ul 将水平显示。嵌套的 ul 是绝对定位的（从文档流中取出）。如果您从其父级中删除相对位置，它将不会被限制在 li 内。

Answer 2

在我看来， submenuli就像预期的那样浮动，但是它们的父级的宽度ul太窄了，以至于它们换成了多行。Firebug 告诉我子菜单的计算宽度ul只有 71 像素，但我看不到它的设置位置。尝试将其显式设置得更宽。

Answer 3

这可能会帮助你：
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>