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

Question

我有一个运行良好的菜单，但无法弄清楚如何使第二级子菜单水平显示而不是垂直显示。整个菜单只需要 2 行，因此将鼠标悬停在第一行应该会在第二行水平显示子菜单选项。看吧here直播。

期望:

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 是绝对定位的(从文档流中取出)。如果您从其父项中移除位置 relative，它将不会限制在 li 中。