CSS下拉菜單二級inline-block的觀點

我猜的答案很簡單，不過，我無法弄清楚如何使我的第二級菜單看作是inline-block的 - 從這個：CSS下拉菜單二級inline-block的觀點

enter image description here

這樣：

enter image description here

所以我需要的是一個內嵌塊上市+文字居中對齊。非常感謝您的幫助。

HTML：

<ul id="menu"> 
    <li><a href="#">Home</a></li> 
    <li><a href="#">About Us</a> 
    <ul> 
     <li><a href="#">The Team</a></li> 
     <li><a href="#">History</a></li> 
     <li><a href="#">Vision</a></li> 
    </ul> 
</li> 
<li><a href="#">Products</a> 
    <ul> 
     <li><a href="#">Cozy Couch</a></li> 
     <li><a href="#">Great Table</a></li> 
     <li><a href="#">Small Chair</a></li> 
     <li><a href="#">Shiny Shelf</a></li> 
     <li><a href="#">Invisible Nothing</a></li> 
    </ul> 
</li> 
<li><a href="#">Contact</a> 
    <ul> 
     <li><a href="#">Online</a></li> 
     <li><a href="#">Right Here</a></li> 
     <li><a href="#">Somewhere Else</a></li> 
    </ul> 
</li>

CSS：

ul { 
    font-family: Arial, Verdana; 
    font-size: 14px; 
    margin: 0; 
    padding: 0; 
    list-style: none; 
} 
    ul li { 
    display: block; 
    position: relative; 
    float: left; 
} 
li ul { 
    display: none; 
} 
ul li a { 
    display: block; 
    text-decoration: none; 
    color: #ffffff; 
    border-top: 1px solid #ffffff; 
    padding: 5px 15px 5px 15px; 
    background: #1e7c9a; 
    margin-left:1px; 
    white-space: nowrap; 
} 
ul li a:hover { 
    background: #BBBBBB; 
} 
li:hover ul { 
    display: block; 
    position: absolute; 
} 
li:hover li { 
    float: none; 
    font-size: 11px; 
} 
li:hover a { 
    background: #3b3b3b; 
} 
li:hover li a:hover { 
    background: #CCC; 
}

來源

2013-07-03 baron

添加到您的CSS

ul li { 
    display: block; 
    float: left; 
} 
li:hover ul { 
    display: block; 
    position: absolute; 
    left:0px; 
} 
li:hover li { 
    float: left; 
    font-size: 11px; 
}

Demo

來源

2013-07-03 19:34:14

完美，非常感謝:) – baron

CSS下拉菜單二級inline-block的觀點

回答

相關問題