向下滚动菜单向上

Question

我想使用这里讨论的css但是使菜单卷起而不是向下

How to create a menu that rolls down? CSS

Answer 1

只需交换#two和#one的位置即可。 试试这个小提琴。

<div class="wrapper">
    <div id="two">
        <ul>
            <li>Menu1</li>
            <li>Menu2</li>
            <li>Menu3</li>
        </ul>
    </div>
    <div id="one">(content)</div>
</div>

Answer 2

我设法做了这么多，其余的我留给你http://jsfiddle.net/BeDQr/156/

HTML

<div class="wrapper">
<div id="one">(content)</div>
<div id="two">
<ul>
<li>Menu1</li>
<li>Menu2</li>
<li>Menu3</li>
</ul>
</div>
</div>

CSS

body, * {
margin: 0;
padding: 0;
}
.wrapper {
margin-top:5em;
border: 1px solid black;
}
#two {
position:absolute;
height: 0em;
overflow: hidden;
transition-property: height;
transition: all 1s ease-in-out;
}
.wrapper:hover #two {
height: 4em;
margin-top:-5em;
}