【代码摘录】HTML+CSS实现下拉菜单

在B站上看到一个up主写的一段下拉菜单代码，实现效果还挺好看的，遂进行小改之后拿来收藏，以供日后使用。

源代码出自：B站up主 山羊の前端小窝 视频链接：https://www.bilibili.com/video/BV1S44y147oV

一、演示效果

演示如下，鼠标悬浮即可查看效果：

二、源代码

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;

}
    

声明：本文内容由网友自发贡献，本站不承担相应法律责任。对本内容有异议或投诉，请联系2913721942#qq.com核实处理，我们将尽快回复您，谢谢合作！