目录：
在B站上看到一个up主写的一段下拉菜单代码，实现效果还挺好看的，遂进行小改之后拿来收藏，以供日后使用。
源代码出自：B站up主 山羊の前端小窝
一、演示效果
演示如下，鼠标悬浮即可查看效果：
二、源代码
1.HTML代码
<body>
<ul class="shell">
<li class="button">
<span>消息</span>
<ul>
<li><a href="" target="_blank">回复我的</a></li>
<li><a href="" target="_blank">收到的赞</a></li>
<li><a href="" target="_blank">我的消息</a></li>
</ul>
</li>
<li class="button">
<span><a href="" target="_blank">动态</a></span>
</li>
<li class="portrait">
<ul class="information">
<li>知识分子没文化</li>
<li><a href="https://www.wlplove.com" target="_blank">博客</a></li>
</ul>
</li>
<li class="button">
<span>收藏夹</span>
<ul>
<li><a href="" target="_blank">默认收藏夹</a></li>
<li><a href="" target="_blank">计算机编程</a></li>
<li><a href="" target="_blank">有点意思</a></li>
<li><a href="" target="_blank">说的不错</a></li>
</ul>
</li>
<li class="button">
<span>投稿</span>
<ul>
<li><a href="" target="_blank">专栏投稿</a></li>
<li><a href="" target="_blank">音频投稿</a></li>
<li><a href="" target="_blank">贴纸投稿</a></li>
<li><a href="" target="_blank">视频投稿</a></li>
<li><a href="" target="_blank">投稿管理</a></li>
</ul>
</li>
</ul>
</body>2.CSS
* {
margin: 0;
padding: 0;
list-style: none;
font-size: 20px;
color: #f4f1de;
}
.shell {
display: flex;
justify-content: center;
margin-top:50px;
}
.button, .portrait {
background-color: #50536e;
width: 170px;
height: 65px;
text-align: center;
line-height: 65px;
transition: 0.3s;
/* 指定浏览网页时鼠标指针的形状 */
cursor: pointer;
}
.portrait::before {
content: '';
display: block;
width: 100px;
height: 100px;
border-radius: 50%;
transform: translate(30px, -30px);
background-image: url("https://image.wlplove.com/static/img/icon/headpic.png");
background-size: cover;
border: 10px solid #fff;
}
.information {
width: 220px;
background-color: #e07a5f;
transform: translate(-20px, -200px);
border-radius: 10px;
padding: 20px 0;
line-height: 0;
height: 0;
transition: 0.3s;
/* opacity属性指定了一个元素的不透明度，其取值从0-1。*/
/* 在0时会完全看不见，1表示完全可见 */
opacity: 0;
}
.button:hover {
background-color: #d15a39;
}
.button li:hover {
background-color: #ffb29d;
}
.button ul li {
height: 0;
transition: 0.2s;
opacity: 0;
transform: translateY(-65px);
background-color: #e07a5f;
}
.button:hover li {
height: 65px;
opacity: 1;
transform: translateY(0);
}
.portrait:hover .information {
opacity: 1;
line-height: 65px;
transform: translate(-20px, -10px);
height: auto;
}
a{
text-decoration: none;
}
评论 (0)