1

http://jsfiddle.net/pixeltramp/ge5zC/

基本的に、すべてのページの下部にあるドロップアップ メニューを作成しています。最初の問題: カーソルを合わせると、メニューのサブメニューが真上にポップアップします。UL を中央に配置したいと思います。どう頑張っても壊れるか、真上の位置にとどまるようです。

同様に、私はメニューにちょっとした css3 フェードイン効果を持っていますが、それはすべてではなく、最初に表示される ul でのみ機能します。

どんな助けでも大歓迎です！全体は、上記のリンクの jsfiddle にあります。

 #block-menu-menu-bottom ul.menu li a {
padding: 0px 20px
}

#block-menu-menu-bottom ul.menu a:hover {

border-bottom: 0px solid #fff;
background:#333333;
}

#block-menu-menu-bottom li {
background-color: none;
-moz-border-bottom-colors: none;
-moz-border-left-colors: none;
-moz-border-right-colors: none;
-moz-border-top-colors: none;
border-color: none;
border-image: none;
border-right: none;
border-style: none;
border-width: none;
float: center;
display: inline-table;
padding: 0px 0px 0px 0px;
font: bold 16pt 'Helvetica';
}

ul.menu-bottom a {
padding: 0em 5px;
}

#block-menu-menu-bottom .content {
margin-bottom: 0;
}

#block-menu-menu-bottom {
display: table;
float: none;
margin: 0 auto;
}

/*#block-menu-menu-bottom div > ul > li + li {
margin-left: 40px;
}*/

#block-menu-menu-bottom a:hover {
 color:#ffffcc;   
}

            #block-menu-menu-bottom li {
                float: left;
                position: relative;
                width:100px;

            }

                    #block-menu-menu-bottom li ul {
                        position: absolute;
                        display:none;
                        width:800%;
                        -webkit-opacity: 0
                        -moz-opacity: 0;
                        opacity: 0;
                        -webkit-transition: all .5s ease;
                        -moz-transition: all .5s ease;
                        -ms-transition: all .5s ease;
                        -o-transition: all .5s ease;
                        transition: all .5s ease;
                    }
                  #block-menu-menu-bottom li:hover ul {
                        bottom:100%;
                        display:block;
                        -webkit-opacity: 1;
                        -moz-opacity: 1;
                        opacity: 1;
                    }

                    #block-menu-menu-bottom li:hover ul li ul{
                        display:none;
                    }

                            #block-menu-menu-bottom li ul li a {
                                padding: 8px 000px;
                                line-height: 28px;
                            width: 5em;
                            }

                    #block-menu-menu-bottom ul li ul li ul{
                        display:none;


}

                    #block-menu-menu-bottom ul li ul li:hover ul {
                        display:block;
                        -webkit-opacity: 1;
                        -moz-opacity: 1;
                        opacity: 1;
}

                    #block-menu-menu-bottom ul li ul li ul li ul{
                        display:none;

}

                    #block-menu-menu-bottom ul li ul li ul li:hover ul {
                        display:block;

}

                    #block-menu-menu-bottom li ul li:hover ul li ul{
                        display:none;

}
4

1 に答える 1

0

ID を削除して CLASS を付与する

最初に機能していたID。しかし、クラスはすべての人のためのものです。

于 2013-06-05T13:14:11.617 に答える