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

我有一个菜单工作得相当好，但不知道如何使第二级子菜单显示水平而不是垂直。整个菜单只需要两行，因此将鼠标悬停在最上面一行上，应该会在第二行水平显示子菜单选项。现场观看

期望的：

option1    option2    option3  
              |
           submenu_option1 submenu_option2

而不是：

option1    option2    option3
              |
           submenu_option1
              |
           submenu_option2

CSS:

HTML:

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

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

谢谢

---

Terry

在我看来，子菜单

li

s像预期的那样是浮动的，但是它们的父菜单

ul

的宽度非常窄，以至于它们可以换行。Firebug告诉我，子菜单

ul

的计算宽度仅为71px，但我看不到设置的位置。尝试将其显式地设置得更宽。

在我看来，子菜单

li

s像预期的那样是浮动的，但是它们的父菜单

ul

的宽度太窄，以至于它们可以换行。Firebug告诉我，子菜单

ul

的计算宽度仅为71px，但我看不到设置的位置。尝试将其显式设置得更宽。

ul.AspNet-Menu li{position:static；}，嵌套的ul将水平显示。嵌套的ul定位为绝对（从文档流中取出）。如果您将相对位置从其父位置移除，它将不会被限制在li内。

这可能会帮助您：
JQuery

var-activetab=null；
$（文档）.ready（函数（）{
$（'#nav'）.children（）.each（function（））{
$（this.addClass（'off'）；
$（this）.find（'>a'）.each（function（）{
if（activetab==null）{
activetab=$（这个）；
$（this.parent（）.removeClass（'off'）.addClass（'on'）；
}
$（此）。单击（函数（）{
if（activetab！=null）{
activetab.parent（）.removeClass（'on'）.addClass（'off'）；
}
$（this.parent（）.removeClass（'off'）.addClass（'on'）；
activetab=$（这个）；
返回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'）。每个（函数（）{
$（此）。单击（函数（）{
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:

*{边距：0；填充：0；}

divnav{宽度：800px；边距：40px自动；}
导航{背景色：#dde；高度：30px；}
导航a{
文字装饰：无；
颜色：#444；
文本对齐：居中；
}

导航a:悬停{color:#e3004e；}
nav li{/浮动主要列表项/
保证金：0；
浮动：左；
显示：块；
利润率：0.10px；
}

纳夫利乌尔{
显示：无；
}

导航li.off ul，#导航li.on ul{/将子导航放在下面/
位置：绝对位置；
垫面：5px；
背景色：#F2F2；
高度：30px；
宽度：100%；
}

nav li.on ul{背景色：#f2f2f2；}
nav li a{字体大小：粗体；显示：块；填充：5px；字体大小：1.3em；}
nav li.on ul a，#nav li.off ul a{border:0；float:left；/ie不继承该float/
宽度：自动；右边距：15px；}

导航li.on ul{display:block；}
导航li.off：悬停ul，#导航li.over ul{显示：块；z索引：6000；}
导航>高度{30；}
导航>li:悬停{背景色：#edd；高度：26px；}
nav>li.on{背景色：#edd；}
nav li.off ul a，#nav li.on ul a{显示：块；背景：#f2f2ff2；字体系列：arial，verdana，无衬线；字体大小：small；}

HTML:

这可能会帮到你：
JQuery

var-activetab=null；
$（文档）.ready（函数（）{
$（'#nav'）.children（）.each（function（））{
$（this.addClass（'off'）；
$（this）.find（'>a'）.each（function（）{
if（activetab==null）{
activetab=$（这个）；
$（this.parent（）.removeClass（'off'）.addClass（'on'）；
}
$（此）。单击（函数（）{
if（activetab！=null）{
activetab.parent（）.removeClass（'on'）.addClass（'off'）；
}
$（this）.parent（）.removeClass（'off'）.addClass（'o
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;
}   

<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;
}

*{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;}


<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>