Question

我总结了一个设计，我正面临着一个我不熟悉的问题。我尝试使用transition：height CSS元素在悬停时使用2到2秒的菜单从隐藏扩展到可见。

问题是ul正在遵循转换并在2s内显示，但li完全忽略了转换效果，并在悬停时立即展开。

下面的CSS语法：

#main_navbar_container{
    margin-bottom:0;
    background:white;
}

.navbar-collapse {
  text-align:center;
}

#menu_container{
    width:80%;
    float:right;
    display:block;
}

#primary_menu{
    display:block;
    float:left;
    width:100%;
}

#primary_menu ul{
    list-style: none;
    margin: 0;
    padding-left: 0;
}

#primary_menu a,
#primary_menu a:visited,
#primary_menu a:link{
    color:#ea474b;
    font-weight: 600;
    display: block;
    text-decoration: none;
    padding: 15px 20px;
    margin:auto;
}
#primary_menu a:hover{
    color:#F9690E;
}

#primary_menu li{
    float:left;
    position:relative;
    margin:0
}

#primary_menu ul ul {
    box-shadow: 0 3px 3px rgba(0, 0, 0, 0.2);
    border-radius: 4px;
    border: 1px solid #dadada;
    background: #fff;
    color: #8c9398;
    float: right;
    position: absolute;
    top: 3.5em;
    right: -999em;
    z-index: 99999;
    text-align: center
}
#primary_menu ul li:hover > ul {
    right: 50%;
    margin-right: -100%;
    width: 200px;
 }
 .sub-menu li{
    margin:0 15px !important;
 }

 #primary_menu ul li ul a{
    color:#ea474b;
 }

#primary_menu ul li ul:hover a{
    color:#ea474b;
}
#primary_menu ul li ul li:hover a{
    color:#F9690E;
}

@media (max-width: 1200px){

        #main_navbar_container .container, #menu_container { width: 100%;}
        #menu_container .navbar-collapse { padding: 0;}
        #primary_menu{
            width:100%;
            margin:0;
        }

        #primary_menu li{
            width:100%;
            margin:5px 0 0 0;
        }
        #primary_menu ul li ul { 
            border-radius: 0 !important; 
            border-color: transparent !important; 
            display:hidden;
            height:100px;
            -webkit-transition: height 2s; /* Safari */
            transition: height 2s;
        }

        #primary_menu ul li:hover{
            background:none;
        }
        #primary_menu ul li:hover a{
            font-color:black;
            /*\color:rgb(207,0,15);*/
        }
        #primary_menu ul li:hover ul{
            position:initial;
            display:block;
            background-color:rgb(238,238,238);
            width:100%;
            padding:0;
            margin:0;
            height:400px;
        }
        #primary_menu ul li:hover li:first-of-type{
            border-top:1px solid rgb(238,238,238);
        }

        #primary_menu ul li:hover li:last-of-type{
            border-bottom:1px solid rgb(238,238,238);
        }

        #primary_menu ul li:hover a:link,
        #primary_menu ul li:hover a:visited{
            color:#ea474b;
        }

        #menu-home-screen-menu{
            margin-left:0;
        }
    }

这是一个小提琴：http://jsfiddle.net/x15jw967/

Answer 1

这里有一些帮助。首先，转换最大高度而不是高度以允许变化：

<? >

然后，将overflow设置为hidden，以便外部内容不显示：

#primary_menu ul li ul {
    ...
    max-height:0;
    -webkit-transition: max-height 2s;
    transition: max-height 2s;
}
#primary_menu ul li:hover ul {
    ...
    max-height: 400px;
}

Demo

这里是一个simplified demo，其中近距离过渡也起作用。您可以重新添加样式并查看其中的内容。

CSS菜单转换 - li元素从效果中排除

1 个答案: