html - リスト HTML のドロップダウン メニュー

Question

この質問はいくつかのスレッドで回答されていることは知っていますが、これは異なります。

cssを使用してホバーでドロップダウンを行っていますが、すべて正常に機能しています:コードは次のとおりです: http://jsfiddle.net/2UJDe/

コードドロップダウンが期待どおりにうまく表示されないため、いくつかのコードを追加しました。結果のコードは次のとおり です。今、物事は機能していません。

誰でもアイデアはありますか??

Answer 1

いくつか間違っていることがあります。

テーブルセルの表示プロパティを使用している理由がわかりません。それらは必要なく、おそらく表示を妨げています。

次に、異なる動作をする複数レベルのナビゲーションを扱っているため、スタイルをターゲット/制限できる必要があります。この場合、これを行うためにスタイルで子選択 ( > ) を使用しました。

ここに実用的なフィドルがあります：http://jsfiddle.net/Nb4zU/

Answer 2

float プロパティを right に変更します。

#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;

}