Question

我正在尝试在悬停主菜单项时平滑下拉过渡到子菜单项。最初子菜单是隐藏的，当主菜单项悬停时，子菜单显示，但不是平滑的下拉菜单。这是一个小提琴http://jsfiddle.net/97mgV/1/

没有Jquery / Javascript请

HTML

<ul class="main-menu">
    <li> <a href="">Menu 1</a>
        <ul class="sub-menu">
            <li >Sub menu 1.1</li>
            <li>Sub menu 1.2</li>
            <li>Sub menu 1.3</li>
        </ul>
    </li>
    <li><a href="">Menu 2</a>
        <ul class="sub-menu">
            <li>Sub menu 2.1</li>
            <li>Sub menu 2.2</li>
            <li>Sub menu 2.3</li>
        </ul>
    </li>
    <li><a href="">Menu 3</a>
        <ul class="sub-menu">
            <li>Sub menu 3.1</li>
            <li>Sub menu 3.2</li>
            <li>Sub menu 3.3</li>
        </ul>
    </li>
    <li><a href="">Menu 4</a>
        <ul class="sub-menu">
            <li>Sub menu 4.1</li>
            <li>Sub menu 4.2</li>
            <li>Sub menu 4.3</li>
            <li>Sub menu 4.4</li>
        </ul>
    </li>
    <li><a href="">Menu 5</a>
        <ul class="sub-menu">
            <li>Sub menu 5.1</li>
            <li>Sub menu 5.2</li>
            <li>Sub menu 5.3</li>
        </ul>
    </li>
</ul>

CSS

ul{
    list-style:none;
    padding:0;
}
a{
    text-decoration:none;
    display:block;
}

.main-menu{
    width:50%;
    margin-left:15%;
}
.sub-menu{
    display:none;
    background-color:#D7D5D5;
    -webkit-transition: all 0.5s ease;
    -moz-transition: all 0.5s ease;
    transition: all 0.5s ease;
}

.sub-menu li{
    padding: 3px 8px;
}

.main-menu > li > a{
    background-color:#4D4A4A;
    color:#fff;
    border-bottom: 1px solid #3D3B3B;
    border-radius:2px;
    padding: 5px 10px;
    font-size:18px;
}

.main-menu li:hover > ul{
    display:block;
}

Answer 1

您无法使用display执行转换，而是将菜单设置为overflow:hidden max-height:0;以隐藏最初的内容，然后max-height:somelargenumber :hover }顺利扩展内容。

Demo Fiddle

CSS：

ul{
    list-style:none;
    padding:0;
}
a{
    text-decoration:none;
    display:block;
}

.main-menu{
    width:50%;
    margin-left:15%;
}
.sub-menu{
    overflow:hidden;
    max-height:0;
    height:auto;
    background-color:#D7D5D5;
    -webkit-transition: all 0.5s ease;
    -moz-transition: all 0.5s ease;
    transition: all 0.5s ease;
}

.sub-menu li{
    padding: 3px 8px;
}

.main-menu > li > a{
    background-color:#4D4A4A;
    color:#fff;
    border-bottom: 1px solid #3D3B3B;
    border-radius:2px;
    padding: 5px 10px;
    font-size:18px;
}
.main-menu li:hover > ul{
    max-height:1000px;
}

使用css平滑向下滚动主菜单上的子菜单

1 个答案:

Demo Fiddle