div+css实现下拉菜单代码-html代码-BFW代码库

div+css实现下拉菜单代码

代码语言：html

代码描述：div+css实现下拉菜单代码

下面为部分代码预览，完整代码请点击下载或在bfwstudio webide中打开

<!DOCTYPE html>
<html lang="en">
    <head>
        <meta charset="UTF-8">
        <meta http-equiv="X-UA-Compatible" content="IE=edge">
        <meta name="viewport" content="width=device-width, initial-scale=1.0">
<style>

* {
    margin: 0;
    padding: 0;
    font-size: 20px;
    color: #f4f1de
}

li {
    list-style: none
}

a {
    text-decoration: none
}

body {
    width: 100vw;
    height: 100vh;
    display: flex;
    flex-direction: column;
    justify-content: center;
    align-items: center;
    background: linear-gradient(to right,#c0ebd7,#44cef6)
}

.container {
    display: flex;
    justify-content: center
}

.menu {
    background-color: #4b5cc4;
    width: 120px;
    height: 40px;
    text-align: center;
    line-height: 40px;
    transition: .3s;
    cursor: pointer
}

.menu:hover {
    background-color: #ff7500
}

.menu ul li {
    background-color: #ff7500;
    height: 0;
    transition: .5s;
    opacity: 0;
    transform: translateY(-40px)
}

.menu:hover li {
    height: 40px;
    opacity: 1;
    transform: translateY(0)
}


</style>
    </head>
    <body>
        <ul class="container">
            <li class="men.........完整代码请登录后点击上方下载按钮下载查看