Compartamos brevemente la preparación del menú secundario.
título
Creo que mucha gente conoce la preparación del menú secundario, pero encontré algunos problemas en este aspecto en ese momento, así que quise hacer un registro sencillo.
Parte de código
<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>
De esta manera, la escritura del menú secundario puede realizarse y mostrarse lentamente con el tiempo.
Nota : De hecho, si usa display: inline-block / block; para estos dos atributos, no puede lograr el atributo de transición
y otro El El método de transición es usar animación, es decir, usar la propiedad translate en transform, solo use translate.
Corrija los errores .