它并不完美，您可能希望重新使用工具并对其进行一些修改，以完全按照您想要的方式获得它，但主体就在这里（我不得不用jQuery设置高度动画，因为高度是动态的，我们无法在CSS中设置值。）

以下是HTML：

<div class="menu-risk-menu-container">
    <ul id="menu-risk-menu" class="menu">
        <li class="dropdown"><a href="#" class="dropdown-toggle" data-toggle="dropdown" aria-expanded="false">Environmental Health &amp; Safety</a>
            <ul class="dropdown-menu" role="menu" x-placement="bottom-start">
                <li><a href="/page/link">EH&amp;S</a></li>
                <li><a href="/page/link">Main</a></li>
            </ul>
        </li>
        <li class="dropdown "><a href="#" class="dropdown-toggle" data-toggle="dropdown">Menu Heading 2</a>
            <ul class="dropdown-menu" role="menu">
                <li><a href="page/link">IIPP</a></li>
            </ul>
        </li>
    </ul>
</div>

然后我们需要样式表中的CSS：

*{
    box-sizing:border-box;
}
a{
    text-decoration:none;
}
.menu-risk-menu-container{
    display:block;
    width:50%;
}
#menu-risk-menu{
    list-style-type:none;
    padding:1em;
    border: 1px solid #AAA;
}
#menu-risk-menu li.dropdown{
    display:block;
    width:100%;
    padding:0.5em 0.5em;
}
.dropdown-menu{
    display:block;
    position:relative;
    top:-0.5em;
    width:100%;
    overflow:hidden;
    list-style-type:none;
    -webkit-transition: opacity 1.5s ease-out, top 0.5s ease-out;
    -moz-transition: opacity 1.5s ease-out, top 0.5s ease-out;
    -o-transition: opacity 1.5s ease-out, top 0.5s ease-out;
    transition: opacity 1.5s ease-out, top 0.5s ease-out;
    height:0;
    opacity:0;
    margin-left:1em;
}
.dropdown-menu.activated{
    top:0;
    opacity:1;
    height:auto;
}
.dropdown-menu li{
    margin:0 auto;
    padding:0.25em;
}
.dropdown-toggle:before{
    content: \'+\';
    display:block;
    float:left;
    width:0.75em;
    height:0.75em;
    font-size:1.1em;
    color:#888;
    text-align:center;
    line-height:0.6em;
    margin:0 1em 0 0;
    padding:0.1em;
    border:1px solid #888;
    -webkit-transition:all 1s ease-out;
    -moz-transition:all 1s ease-out;
    -o-transition:all 1s ease-out;
    transition:all 1s ease-out;
}
.dropdown-toggle.is-open:before{
    transform:rotate(90deg);
    color:#444;
}

最后是jQuery：

jQuery( document ).ready( function($) {
    var riskMenu = $( \'#menu-risk-menu\' );
    if( $( riskMenu ).length > 0 ) {
        $( \'.dropdown-toggle\' ).on( \'click\', function(e) {
            e.preventDefault(); 
            $( this ).toggleClass( \'is-open\' );
            $( this ).closest( \'.dropdown\' ).find( \'.dropdown-menu\' ).toggleClass( \'activated\' );
            var ddHeight    = $( this ).closest( \'.dropdown\' ).find( \'.activated\' ).height();
            $( this ).closest( \'.dropdown\' ).find( \'.dropdown-menu.activated\' ).animate( {
                \'height\': function( index, height ) {
                    return height == ddHeight ? 0 : ddHeight;
                }
            }, 1750 );
            $( this ).attr( \'aria-expanded\', function( index, attr ) {
                return attr == \'true\' ? false : \'true\';
            } );
        } );
    }
} );

我认为很多CSS都是您想要更改的—我只需要额外编写一些内容，因为我在自己的服务器上做了一些测试。

希望对你有用。