CSS：水平子菜單問題

在我的HTML，它看起來是這樣的：

<ul id="nav"> 
    <li><a href="#">Home</a></li> 
    <li><a href="#" class="selected">About Us</a> 
     <!-- I want to make this horizontal --> 
     <ul id="subnav"> 
      <li><a href="#">Item 01</a></li> 
      <li><a href="#" class="selected">Item 02</a></li> 
      <li id="nav_last"><a href="#">Item 03</a></li> 
     </ul> 
     <!-- End here --> 
    </li> 
</ul>

我的列表CSS是這樣的：

/* remove the list style */ 
#nav { 
    margin:0; 
    padding:0; 
    list-style:none; 
} 

/* make the LI display inline */ 
/* it's position relative so that position absolute */ 
/* can be used in submenu */ 
#nav li { 
    float:left; 
    display:block; 
    width:100px; 
    background:#d90000; 
    position:relative; 
    z-index:500; 
    margin:0 1px; 
} 

/* this is the parent menu */ 
#nav li a { 
    display:block; 
    /*padding:8px 5px 0 5px; */ 
    padding-top: 11px; 
    font-weight:normal; 
    height:30px; 
    text-decoration:none; 
    text-align:center; 
    color:#f8e2e2; 
} 

#nav li a:hover { 
    color:#f8e2e2; 
    background-color: #bf0000; 
    border-left: 1px solid #a50000; 
    border-right: 1px solid #a50000; 
} 

#subnav { 
    position:absolute; 
    left:0; 
    display:none; 
    margin: 0 0 0 0; 
    padding:12px 0 0 0; 
    list-style:none; 
    background-image: url('../images/arrow_down.png'); 
    background-repeat: no-repeat; 
} 

#subnav li{ 
    font-size: 0.9em; 

    border-top:1px solid #a50000; 
    border-left:1px solid #a50000; 
    border-right:1px solid #a50000; 

    position:relative; 
    width:98px; 
    display:block; 
    float:left; 
}

而且我使用jQuery顯示/隱藏子列表。我的問題是，子菜單不是水平的。我需要在CSS上對子菜單進行哪些更改才能變爲水平？我花了幾個小時沒有成功。

非常感謝！

來源

2010-03-12 wenbert

@wenbert你可以發佈jQuery，也許你需要添加float：left;給你導航 – ant 2010-03-12 15:14:46

我意識到這是回答，但你可以發佈一個完整的代碼jsfiddle，因爲它可以幫助其他人對這個相同的問題感興趣。 – puk 2012-11-07 01:16:07

@puk對不起，我已經「丟失」完成的代碼。但我記得當我指定容器的寬度使其更寬時，它是固定的。 – wenbert 2012-11-07 12:06:46

在#subnav上設置較寬的寬度，例如，

#subnav { 
    width: 600px; 
}

來源

2010-03-12 15:17:34

你太棒了！謝謝！ – wenbert 2010-03-12 17:01:19

噢！你是最受歡迎的。 – 2010-03-12 21:10:55

的#subnav li項目應該是"display:inline"而不是塊。

此外，展開ul的寬度，如另一個答案中所述。

來源

2010-03-12 15:17:51 Brant

'display：block'工作正常，他正在漂浮列表項。關鍵是擴大寬度。 – 2010-03-12 15:23:06

CSS：水平子菜單問題

回答

相關問題