1

私は、この質問が何らかの形で答えられたことをほぼ確信しています。ここや他の場所で見つけた変更を適用しても、それ以上は得られないようです。

css メニューを Crisislab.nl からドロップダウン メニューからドロップアップ メニューに変更しようとしています。（サイトでわかるように、私は現在それに取り組んでいます。）

私が直面している現在の問題は、メニューが正常に機能しているように見えるという事実です。メニューテキストが下に表示され、メニューが上に移動しているという事実を期待してください (これが論理的に聞こえない場合は、crislab.nl を見てください) )

私の現在の進行状況については、以下のコードを参照してください。喜んで手伝ってくれる人はいますか？

よろしくお願いします！

                #navigation {
                width: 980px;
                height: 38px;



        }
            #navigation li {
                float: left;
                position: relative;

                               top: 220px;
            } #navigation li:hover { background: transparent  url(gfx/navigation_hover.png) repeat; }
                #navigation li a {
                    text-transform: uppercase;
                    color: white;
                    padding: 13px 33px;
                    line-height: 38px;
                    font-size: 11px;
                }
                    #navigation li a:hover { text-decoration: none;}
                    #navigation li ul {

                        position: absolute;
                        background: transparent  url(gfx/navigation_hover.png) left top repeat;
                        z-index: 1000;
                        min-width: 100%;
                                                 display:none; 
                                                left:-1px;
                    }
                    #navigation li:hover ul {


                                                        display:block;   

                    }
                        #navigation li ul li {
                            background: none;
                            width: 100%;
                    }
                            #navigation li ul  li:hover {
                                    background: none;
                                background-color: #2a51b5;



                            }
                            #navigation li ul li a {
                                text-transform: uppercase;
                                color: white;
                                padding-left: 8px 10px;
                                line-height: 28px;
                                width: 100%;
                                display:block;



                            }
4

1 に答える 1

3

ドロップダウンとドロップアップの基本的な違いは、子のオフセットですul。

ドロップダウンにはtop:<x>px;あり、ドロップアップが必要な場合は、次のように言います。bottom:<x>px;

コードを修正して機能させました：http://jsfiddle.net/fJSVz/

基本的に、次のルールを変更しました。

#navigation li ul {
     top: -9999px;        /* <- removed */
     display:none;        /* <- this will trigger the hide/show */
}
#navigation li:hover ul {
     bottom:20px;         /* <- this is the trick to push the ul up */
     display:block;       /* <- show the ul on hover */
}
于 2012-06-08T08:59:06.243 に答える