列表中的下拉菜單HTML

我知道這個問題已經在幾個線程中得到了回答，但這是不同的。列表中的下拉菜單HTML

我用css做下拉懸停和一切工作正常：這裏是代碼：http://jsfiddle.net/2UJDe/

因爲，該代碼下拉列表中沒有出現細如預期，我添加了一些代碼，這裏是由此產生的代碼：http://jsfiddle.net/geJmF/（我已將ID添加到單個列表中以僅修復下拉位置）但是不知何故，現在的東西無法正常工作。

任何人的任何想法？

來源

2012-09-24 Agrawal

我不明白什麼是預期的結果。 –

你能向我們展示你想要達到的目標嗎？有些事情看起來很不必要。看起來你忘了一個位置：相對;？ –

我希望下拉菜單顯示在對應的菜單項下方。你可以看到第一個代碼打開與主菜單重疊的下拉菜單。 – Agrawal

變化float屬性到右：

#navbar_2 li a 
{ 
    background : #878787; 
    color : white; 
    float : right;

並改變一些高度和寬度，菜單2標籤看起來：http://jsfiddle.net/jvKRN/35/

此處的CSS：

#navbar_2 
{ 
    height : 200px; 
    left : 140px; 
    overflow : hidden; 
    position : absolute; 
    top : 70px; 
    width : 800px; 
    display : inline-table; 
    list-style : none; 
    margin : 0; 
    padding : 0; 
    table-layout : fixed; 

} 

#navbar_2 li 
{ 
    background-color : #878787; 
    display : table-cell; 

} 

#navbar_2 li a 
{ 
    background : #878787; 
    color : white; 
    float : right; 
    font-family : Arial,sans-serif; 
    font-size : 32px; 
    height : 100.000%; 
    line-height : 200px; 
    padding : 0px 0; 
    text-align : center; 
    text-decoration : none; 
    white-space : nowrap; 
    width : 100%; 

    border-left : 1px solid black; 
} 

#navbar_2 li a:hover 
{ 
    background : black; 
    color : white; 

} 

#navbar_2 li:hover ul 
{ 
    left: auto; 

} 

#navbar_2 li ul 
{ 
    position: absolute; 
    width: 200px; 
    left: -999em; 

} 

#navbar_2_1 
{ 
    display : inline; 
    height : 600px; 
    list-style : none; 
    overflow : hidden; 
    position : absolute; 
    table-layout : auto; 
    top : 200px; 
    width : 200px; 

} 
#navbar_2_2 
{ 
    display : inline; 
    height : 600px; 
     list-style : none; 
    margin : 0; 
    overflow : hidden; 
    padding : 0; 
    position : absolute; 
    table-layout : auto; 
    top : 200px; 
    width : 200px; 

} 

#navbar_2_3 
{ 
    display : inline; 
    height : 600px; 
    left : 740px; 
    list-style : none; 
    margin : 0; 
    overflow : hidden; 
    padding : 0; 
    position : absolute; 
    table-layout : auto; 
    top : 200px; 
    width : 200px; 

}

來源

2012-09-24 14:38:43 RMN

有幾個事情不正確。

我不知道你爲什麼使用表格單元顯示屬性，它們不是必需的，可能會妨礙你的顯示。其次，因爲我們處理的行爲不同，所以我們需要能夠定位/限制我們的樣式。在這種情況下，我在我的樣式中使用了子選擇（>）來執行此操作。

這裏是工作提琴：http://jsfiddle.net/Nb4zU/

來源

2012-09-24 15:06:54 jkinz

列表中的下拉菜單HTML

回答

相關問題