CSS浮動和嵌套列表

在CSS中，我浮動嵌套列表集以創建下拉菜單。但是，這些標題並不像下拉菜單中的許多項那麼寬，所以標題最終會不成比例地分佈（因爲它們的每個下拉組件都有不同的寬度） - 顯然列表的寬度與其最寬的組件）。有沒有人有任何建議如何解決這個問題？CSS浮動和嵌套列表

這裏是我的代碼：

<body> 

    <ul id="navigation"> 

    <li><a href="#">Header A</a></li> 
    <li class="sub"> 

     <a href="#">Header B</a> 

     <ul> 

     <li><a href="#">Item AAAAAAAAAAAA</a></li> 
     <li><a href="#">Item BBBBBBBBBBBB</a></li> 
     <li><a href="#">Item CCCCCCCCCCCC</a></li> 
     <li><a href="#">Item DDDDDDDDDDDD</a></li> 
     <li><a href="#">Item EEEEEEEEEEEE</a></li> 
     </ul> 

    </li> 

    <li> 
     <a href="#">Header C</a> 
    </li> 

    </ul> 

</body>

這裏是CSS：

body { 

    padding: 0; 
    margin: 0; 

    } 


#navigation { 
margin: 0; 
padding: 0 1em; 
background: #000; 
height: 3em; 
list-style: none; 
font-family: "Helvetica Neue"; 
    } 

#navigation > li { 
float: left; 
height: 100%; 
margin-right: 0.5em; 
padding: 0 1em; 
} 

#navigation > li > a { 
color: #7A7A7A; 
text-decoration: none; 
line-height: 3; 
font-weight: bold; 
} 

#navigation > li > a:hover { 
    color: #FFFFFF; 
} 

#navigation > li.sub ul { 
margin: 0; 
padding: 0.5em 0; 
list-style: none; 
background: rgba(12,13,69,1); 
position: relative; 
top: 10000px; 
} 

#navigation > li.sub ul li a { 
height: 100%; 
display: block; 
padding: 0.4em; 
color: #fff; 
font-weight: bold; 
text-decoration: none; 
} 

#navigation > li.sub ul li a:hover { 
background: #00F2FF; 
text-decoration: none; 
} 

#navigation > li.sub:hover ul { 
display: block; 
top: 0px; 
}

來源

2012-10-23 voltair

這會更有助於社會的，你可以發佈您的代碼。 – Jason

沒有看到你的代碼，它不可能說什麼發生在您的具體情況。

但這裏是一個工作示例：http://jsfiddle.net/kboucher/nrAPu/

HTML

<nav> 
    <ul> 
     <li> 
      Menu One 
      <ul> 
       <li> 
        <a href="#">Menu One Item One</a> 
        <ul> 
         <li><a href="#">Menu One Item One Submenu Item One</a></li> 
         <li><a href="#">Menu One Item One Submenu Item Two</a></li> 
         <li><a href="#">Menu One Item One Submenu Item Three</a></li> 
         <li><a href="#">Menu One Item One Submenu Item Four</a></li> 
        </ul> 
       </li> 
       <li><a href="#">Menu One Item Two</a></li> 
       <li><a href="#">Menu One Item Three</a></li> 
       <li><a href="#">Menu One Item Four</a></li> 
      </ul> 
     </li> 
     <li> 
      Menu Two 
      <ul> 
       <li><a href="#">Menu Two Item One</a></li> 
       <li><a href="#">Menu Two Item Two</a></li> 
       <li><a href="#">Menu Two Item Three</a></li> 
       <li><a href="#">Menu Two Item Four</a></li> 
      </ul> 
     </li> 
    </ul> 
</nav>

CSS

body { font-family: Helvetica, Arial, Sans-serif; line-height: 1.5em; } 
a:hover { color: #cc0000; } 

/* Hide submenu */ 
nav ul > li > ul, 
nav ul > li > ul > li > ul { display:none; } 

/* Layout menubar and menus */ 
nav { background:#ddd; padding:0.25em 0.5em; } 
nav > ul > li { cursor: pointer; display:inline-block; padding:0 1em; } 
nav > ul > li > ul { background: #ddd; padding:0.5em; position: absolute; z-index: 1000; } 
nav > ul > li > ul > li > ul { background: #ccc; padding:0.5em; position: absolute; left: 90%; top: 0; z-index: 1001; } 

/* show submenu on hover */ 
nav ul > li:hover > ul, 
nav ul > li > ul > li:hover > ul { display:block; width:10em; }

來源

2012-10-23 22:29:35

CSS浮動和嵌套列表

回答

相關問題