* { margin:0; padding:0; } body { background-color:rgb(244,246,249); } li { list-style:none; } .user { position: relative; float: left; width: 75px; height: 75px; margin-top: 8px; border: 1px solid #1e9bf5; border-radius: 50%; cursor: pointer; background-image: url(http://www.jq22.com/img/cs/500x500-3.png); background-size: 100% auto; } #user { position:absolute; width:100%; top:0px; left:0px; } .head .id { float:right; color:#000; margin-top:64px; margin-right:10px; } .user_list { /*display:none; */ overflow:hidden; position:absolute; z-index:999; right:-30px; top:82px; width:130px; height:0px; border:1px solid #f5f6f7; border-top:0px; border-bottom:0px; border-radius:2px; padding-top:0px; background-color:#fff; transition:height ease 0.6s; } .user:hover .user_list { height:190px; border-bottom:1px solid #f5f6f7; } .user_list ul li { position:relative; height:30px; line-height:30px; /*margin-left:20px; */ padding-left:25px; font-family:Microsoft Yahei; } .user_list ul li:hover { background-color:#ccc; } .user_list ul li:nth-child(1) { margin-top:5px; } .user_list ul li a { text-decoration:none; color:#333; font-size:15px; } .user_list ul li a i { margin-right:10px; } .tabsInfo { display:block; position:absolute; top:0px; right: 0px; height:16px; width:16px; background:red; line-height:16px; color:#fff; border-radius:50%; font-size:12px; z-index:999; text-align:center; } .number { display:block; position:absolute; top:5px; left:60px; height:16px; width:16px; background:red; line-height:16px; color:#fff; border-radius:50%; font-size:12px; z-index:999; text-align:center; }
更新时间:2020-09-01 10:36:46
这是一个头像的下拉列表菜单 仅有简单的html和css构成 实现了hover过渡和消息提示小圆点的css模拟 由于图标库<font-awesome>引入失败 所以没有显示 您可以自己引入即可呈现。初学前端 ,望多多指教。