max-height＆＃34; double transition＆＃34;问题

Question

我正在创建一个简单的手风琴菜单，没有js。 我有一个max-height过渡的问题。 它会创建一个＆＃34;双动画/过渡＆＃34;，所以它不流畅。

问题代码：

＆＃13;

＆＃13;

/*TOP LEVEL MENU*/
 ol {
    list-style: none;
    margin: 0px;
    padding: 0px;
    min-width: 150px;
    max-width: 200px;
}
ol li {
    max-height: 20px;
    transition: max-height .7s ease-in-out;
    -webkit-transition: max-height .7s ease-in-out;
    -moz-transition: max-height .7s ease-in-out;
    -ms-transition: max-height .7s ease-in-out;
    -o-transition: max-height .7s ease-in-out;
    overflow: hidden;
}
ol li:target {
    max-height: 100px;
}
ol a {
    text-decoration:none;
}
/*SUBMENU*/
 ol li ol {
    opacity: 0.5;
    padding-left: 10px;
    padding-right: 10px;
    padding-top: 5px;
    border: 0px;
    max-width: 100%;
    max-height: 80px;
    overflow-y: auto;
    transition: all .7s ease-in-out;
    -webkit-transition: all .7s ease-in-out;
    -moz-transition: all .7s ease-in-out;
    -ms-transition: all .7s ease-in-out;
    -o-transition: all .7s ease-in-out;
    font-size:12px;
}
ol li:target ol {
    opacity: 1;
}

＆＃13;

<div id="menu">
    <ol>
        <li id=""><a href=""><span>BÜRO<span></a>
        </li>
        <li id="item-1"><a href="#item-1"><span>PROJEKTE<span></a>

            <ol>
                <li><a href="">Sub Menu Item 2.1</a>
                </li>
                <li><a href="">Sub Menu Item 2.1</a>
                </li>
                <li><a href="">Sub Menu Item 2.1</a>
                </li>
                <li><a href="">Sub Menu Item 2.1</a>
                </li>
            </ol>
        </li>
        <li id="item-2"><a href="#item-2"><span>KONTAKT<span></a>

            <ol>
                <li><a href="">Sub Menu Item 2.1</a>
                </li>
                <li><a href="">Sub Menu Item 2.1</a>
                </li>
            </ol>
        </li>
        </li>
        <li id="item-3"><a href="#item-3"><span>KONTAKT<span></a>

            <ol>
                <li><a href="">Sub Menu Item 2.1</a>
                </li>
                <li><a href="">Sub Menu Item 2.1</a>
                </li>
            </ol>
        </li>
    </ol>
</div>

＆＃13;

＆＃13;

＆＃13;

CORRECT-CODE（没有max-height）：

＆＃13;

＆＃13;

/*TOP LEVEL MENU*/
 ol {
    list-style: none;
    margin: 0px;
    padding: 0px;
    min-width: 150px;
    max-width: 200px;
}
ol li {
    height: 20px;
    transition: height .7s ease-in-out;
    -webkit-transition: height .7s ease-in-out;
    -moz-transition: height .7s ease-in-out;
    -ms-transition: height .7s ease-in-out;
    -o-transition: height .7s ease-in-out;
    overflow: hidden;
}
ol li:target {
    height: 100px;
}
ol a {
    text-decoration:none;
}
/*SUBMENU*/
 ol li ol {
    opacity: 0.5;
    padding-left: 10px;
    padding-right: 10px;
    padding-top: 5px;
    border: 0px;
    max-width: 100%;
    max-height: 80px;
    overflow-y: auto;
    transition: all .7s ease-in-out;
    -webkit-transition: all .7s ease-in-out;
    -moz-transition: all .7s ease-in-out;
    -ms-transition: all .7s ease-in-out;
    -o-transition: all .7s ease-in-out;
    font-size:12px;
}
ol li:target ol {
    opacity: 1;
}

＆＃13;

<div id="menu">
    <ol>
        <li id=""><a href=""><span>BÜRO<span></a>

        </li>
        <li id="item-1"><a href="#item-1"><span>PROJEKTE<span></a>

            <ol>
                <li><a href="">Sub Menu Item 2.1</a>

                </li>
                <li><a href="">Sub Menu Item 2.1</a>

                </li>
                <li><a href="">Sub Menu Item 2.1</a>

                </li>
                <li><a href="">Sub Menu Item 2.1</a>

                </li>
            </ol>
        </li>
        <li id="item-2"><a href="#item-2"><span>KONTAKT<span></a>

            <ol>
                <li><a href="">Sub Menu Item 2.1</a>

                </li>
                <li><a href="">Sub Menu Item 2.1</a>

                </li>
            </ol>
        </li>
        </li>
        <li id="item-3"><a href="#item-3"><span>KONTAKT<span></a>

            <ol>
                <li><a href="">Sub Menu Item 2.1</a>

                </li>
                <li><a href="">Sub Menu Item 2.1</a>

                </li>
            </ol>
        </li>
    </ol>
</div>

＆＃13;

＆＃13;

＆＃13;

谢谢！