Partageons brièvement la préparation du menu secondaire
Titre
Je crois que beaucoup de gens connaissent la préparation du menu secondaire, mais j'ai rencontré quelques problèmes dans cet aspect à l'époque, donc j'ai voulu faire un simple enregistrement.
Partie de code
<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 cette façon, l'écriture du menu secondaire peut être réalisée et affichée lentement dans le temps.
Remarque : En fait, si vous utilisez display: inline-block / block; pour ces deux attributs, vous ne pouvez pas obtenir l'attribut transition
et un autre. La méthode de transition consiste à utiliser une animation, c'est-à-dire à utiliser la propriété translate dans transform, à utiliser simplement translate.
Veuillez corriger les erreurs .