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 {position：static; }並且嵌套的ul將水平顯示。嵌套的ul位於絕對位置（從文檔流中取出）。如果您從其父母移除相對位置，則不會將其限制在李的範圍內。

Answer 2

它看起來對我來說，子菜單li s的浮動符合市場預期，但他們的父母ul的寬度很窄，他們換到多行。 Firebug告訴我，子菜單ul的計算寬度僅爲71px，儘管我無法看到設置的位置。嘗試將其設置得更寬一些。

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>