html嵌套列表

Question

我試圖建立一個使用嵌套列表的導航菜單，但是無論何時我爲li設置一個高度，它將打破列表和子菜單放置在最後的li上，我已鏈接到我的意思，

Nested List Example

如何解決我的代碼，所以我實現類似下面的東西？

• 列表項
• 列表項
  • 子列表項
  • 子列表項
  • 子列表項
  • 子列表項
• 列表項

Answer 1

將您的CSS更改爲此。

.seconday_nav { 
    width: 95px; 
    float: left; 
    margin: 32px 0px 0px 0px; 
} 
ul.subnav { 
    margin-left: 60px; 
} 
.seconday_nav ul.subnav li { 
    width: 93px; 
    text-align: right; 
    padding: 10px 0px; 
    border: 1px solid green; 
    display: block; 
    height: 25px; 
} 
.seconday_nav ul li a, .seconday_nav ul.subnav li a { 
     background-image: -webkit-gradient(linear, left top, right top, color-stop(0.35, white), color-stop(0.68, #f4f5f5)); 
     background-image: -moz-linear-gradient(left center, white 35%, #f4f5f5 68%); 
     display: block; 
     width: 100%; 
     height: 100%; 
     padding: 0px 10px 0px 10px; 
} 

我做了什麼，僅在您的子導航上放置了60的餘裕。這現在將UL從左側推出，併爲其尋找外觀。

Answer 2

這裏的幾個問題：

.seconday_nav { 
    width: 95px; 
    float: left; 
    margin: 32px 0px 0px 0px; } 
    .seconday_nav ul li, .seconday_nav ul.subnav li { 
    width: 93px; 
    text-align: right; 
    padding: 10px 0px; 
    border: 1px solid green; 
    display: block; 
    height: 25px; } /* PROBLEM 1 */ 
    .seconday_nav ul li a, .seconday_nav ul.subnav li a { 
     background-image: -webkit-gradient(linear, left top, right top, color-stop(0.35, white), color-stop(0.68, #f4f5f5)); 
     background-image: -moz-linear-gradient(left center, white 35%, #f4f5f5 68%); 
     display: block; 
     width: 100%; /* PROBLEM 2 */ 
     height: 100%; 
     padding: 0px 10px 0px 10px; } 

問題1：你是給25像素的高度，它包含了所有的子表項.seconday_nav ul li影響li包含subnav元素。

問題2：你正在給元素填充哪個寬度被聲明爲100％，這總是給出父+填充的100％，因此它溢出父項。既然你已經給a元素display: block沒有必要給他們100％的寬度，只有身高。

這應該有助於你開始解決你的問題:)