console
<html>
<head>
<script src="https://cdn.bootcss.com/jquery/3.4.1/jquery.min.js">
</script>
<style>
* {
white-space: nowrap;
}
nav {
height: 50px;
background-color: #fff;
box-shadow: 0 0 5px 1px rgb(158 179 193 / 50%);
overflow: visible;
width: 100%;
top: 0;
left: 0;
position: fixed;
}
.wrap {
align-items: center;
justify-content: center;
display: flex;
height: 100%;
margin: 0 auto;
}
.right-part {
display: flex;
align-items: center;
justify-content: center;
height: 100%;
}
.user-panel {
position: relative;
}
.drop-list {
left: 50%;
top: 100%;
background-color: #fff;
border-radius: 0 0 10px 10px;
transform: translate(-50%);
box-shadow: 0 10px 10px 0 rgb(0 0 0 / 16%);
transition-duration: .2s;
overflow: hidden;
position: absolute;
}
.user-avatar {
background-image: url("data:image/jpeg;base64,/9j/4AAQSkZJRgABAQAAAQABAAD/2wBDAAgGBgcGBQgHBwcJCQgKDBQNDAsLDBkSEw8UHRofHh0aHBwgJC4nICIsIxwcKDcpLDAxNDQ0Hyc5PTgyPC4zNDL/2wBDAQkJCQwLDBgNDRgyIRwhMjIyMjIyMjIyMjIyMjIyMjIyMjIyMjIyMjIyMjIyMjIyMjIyMjIyMjIyMjIyMjIyMjL/wAARCAB4AHgDAREAAhEBAxEB/8QAGwABAAMBAQEBAAAAAAAAAAAAAAIEBQMBBgf/xAA3EAABAwIDAwkGBgMAAAAAAAABAAIDBBEFITESE0EUIjRRVHGBsdEVMmFykqMjM5Gh4fBCRFL/xAAXAQEBAQEAAAAAAAAAAAAAAAAAAQID/8QAGBEBAQEBAQAAAAAAAAAAAAAAAAERQTH/2gAMAwEAAhEDEQA/AP2hdGRAQEBAQEBAQEBAQEBAQEBAQEBAQEBAQEBAQEBAQEBAQEBAQEBAQEBAQEBAQEBAQEBBm4jW1FJPGWNBhIzuNT1X4Ilq7T1EdVCJIzlxHEFFdUEJZWQROkkdstCDOo8QqKuuIawCADPLTx60SVqIogICAgICAg41FVFSx7crrdQGpQUva0hzbRSlp0P9CJqEte+aMxyYfI5p1GfohqhTOqqSfeRQy7J1aWnMIjS9qTdhl/f0RdZ9ZJV1kl3QSNYPdbsnJEW6esdTRCOPD5QBqc7k9eiLrr7Vl1NDLbj/AGyGrlLVxVbCYzmNWnUIrugICAgICDJiLazGZTJmyEWaDpqidXWCadgk37o2uza1oGnxuipbiXtcv0t9EDcS9rl+lvogbmXtcv0t9EDcy9rl+lvogbmXtcv0t9EEXsniYXtndJsi5Y9ozHhogo1bm01fTVUQsJRzwOIy9URroogICAgDVBkYZ0+t8fNEjSpuixfIEWOqAgICAgi/8t/ylBkYp+RRdw8gkStlFEBAQEAaoMjDOn1vj5lEi9HK2DDmSvvstjBNkVlTYxUTO2IG7sHqzcUZ1Yw+mrd+J55HNbbNrjcu8OCLJWsisnEaKqkqDPA8nIDZBsR3IlirDilXTP2JwXgah4sf1RNbUczaik3rQQ1zTkUaZeJ9Hoe4eQSJW0iiAgICANUGRhvTq3x8yiRo07Q6iia4AgxgEHjkipRwRQi0cbWfKECaXcxGQtc4DUN1t1oOHtGm3uxvBs2vvP8AG/V3omu8Eu/hEga5oOgdrbrRUnxskFpGNcOpwug8c0Nhc1oAAaQAO5BkYl0ah7h5BIlbSKICAgIAQZGGdPrW8bnzKJGlTdFi+QIsdUBBHYZa2y22trIJICCMhtE8n/k+SDIxM/gUTeJt5BIlbKKICAgICDKqQ/D681bWF0MmT7cCieJtrqQD8OrMYOeyWXt6Ia95fD2/7SGnL4O3/aQ05fB2/wC0hpy+Dt32/wCENOXwdv8Atfwhrw1tK8WkrS9vFoZa/wCyGucZOJ17JQ0tp4dCR7xQayKICAgICDwgEEEXB4FBXOH0hJJp2Z/BDFLE4aWmpeZAwSPNmm2nWUSq+ER087nxTRNc73mk9XFCOLdwcW2d23c7zZ2eFtETrrizKeB7IYYmtdq4j9gi13wuKlqqctkhYZGHM21HAoRf9n0Y/wBdn6IuLDWhjQ1oAA0ACD1AQEBAQEBAQfPYvPva0sB5sY2fHijNU4JnQTNkYec1BAOIcHcQboJzSunmfK/Vxug74dUcnrGOJ5rua7uKEfTI0ICAgICAgICCEsgihfIdGglB8k5xe5znauNyjLxAQEBB9TQz8oo45D71rO7wjUWEBAQEBAQEBBnYxLu6LYGsjreGqJXz6MiKICAg2cDmylhPwcPIosbCKICAg//Z");
width: 34px;
height: 34px;
margin: 8px 20px;
border-radius: 50%;
background-size: cover;
cursor: pointer;
transition: all .4s cubic-bezier(.22, .58, .12, .98);
}
.l-trans {
width: 280px;
height: 0px;
transition: all .5s cubic-bezier(.22, .58, .12, .98);
}
.inner-wrap {
display: none;
padding: 35px 20px 20px;
animation-duration: .2s;
}
.large-mode .l-trans {
width: 280px;
height: 180px;
}
.large-mode .user-avatar {
transform-origin: 50% 0;
transform: scale(1.8);
box-shadow: 0 0 1em 0.1em rgb(35 173 229 / 30%);
}
.large-mode .user-avatar::before {
content: "";
display: block;
background-color: #32aaff;
width: 100%;
height: 100%;
position: relative;
border-radius: 50%;
opacity: 0;
animation: wave-splashing-avatar .4s cubic-bezier(.22, .58, .12, .98);
}
.large-mode .inner-wrap {
display: block;
animation: move-in-bottom .4s cubic-bezier(.22, .58, .12, .98)
}
@keyframes wave-splashing-avatar {
0% {
opacity: 1;
transform: scale(0)
}
to {
opacity: 0;
transform: scale(2)
}
}
@keyframes move-in-bottom {
0% {
opacity: 0;
transform: translateY(-5em)
}
to {
opacity: 1;
transform: translate(0em)
}
}
</style>
</head>
<body style="background: rgb(204, 232, 204) !important;">
<nav>
<div class="wrap">
<div class="right-part">
<div class="user-panel">
<div class="drop-list">
<div class="l-trans">
<div class="inner-wrap">
<ul>
<li>
<a href="http://jsrun.net/2z8Kp">http://jsrun.net/2z8Kp</a>
</li>
<li>
123456
</li>
<li>
123456
</li>
</ul>
</div>
</div>
</div>
<div class="user-avatar"></div>
</div>
</div>
</div>
</nav>
<script>
$(function() {
$(".right-part").hover(function() {
$(this).addClass('large-mode')
}, function() {
$(this).removeClass('large-mode')
})
})
</script>
</body>
</html>