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 用于第一次工作。但是Class是为所有人服务的。

于 2013-06-05T13:14:11.617 回答