二次メニューの準備について簡単に説明しましょう
題名
二次メニューの作り方はご存知の方も多いと思いますが、当時はこの点で問題があったので、簡単な記録を作りたかったのです。
コード部分
<style>
/* 大盒子*/
.main{
width:500px;
height:500px;
position:relative;
}
/* 隐藏层*/
.main-content{
position:absolute; /*在这里定位所隐藏层的位置于你想安置的地方
例：top:500px;这时隐藏层就处于正下方 */
width:500px;
height:0px; /*隐藏层的高度渐变前提*/
background-color:pink;
transition:all 0.5s;
}
/*伪类*/
.main:hover .main-content{
hight:500px;
}
</style>
<body>
<div class="main">
<span>移动到我这里</span>
<div class="main-content">
<p>嘿嘿！我出来了</p>
</div>
</div>
</body>
このようにして、セカンダリメニューの書き込みを実現し、時間の経過とともにゆっくりと表示することができます。
注：実際、display：inline-block / block;を使用する場合、これら2つの属性に対して、遷移属性
と別の属性を実現することはできません。遷移方法は、アニメーションを使用することです。つまり、変換でtranslateプロパティを使用し、translateを使用するだけです。
間違いを訂正してください。