css实现淡入淡出效果的多级下拉菜单效果代码-html代码-BFW代码库

css实现淡入淡出效果的多级下拉菜单效果代码

代码语言：html

代码描述：css实现淡入淡出效果的多级下拉菜单效果代码

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

<!DOCTYPE html>
<html lang="en">

<head>
    <meta charset="UTF-8">

    <link rel='stylesheet prefetch' href='https://fonts.googleapis.com/css?family=Karla'>
    <link type="text/css" rel="stylesheet" href="//repo.bfw.wiki/bfwrepo/css/font-awesome-4.7.0/css/font-awesome.min.css">
    <style>
        html, body{
       padding:0px;
       margin:0px;
       background:#222;
       font-family: 'Karla', sans-serif;
       width:100vw;
    }
    body * {
       margin:0;
       padding:0;
    }
    
    /* HTML Nav Styles */
    /* HTML Nav Styles */
    /* HTML Nav Styles */
    nav menuitem {
       position:relative;
       display:block;
       opacity:0;
       cursor:pointer;
    }
    
    nav menuitem > menu {
       position: absolute;
       pointer-events:none;
    }
    nav > menu { display:-webkit-box; display:-ms-flexbox; display:flex; }
    
    nav > menu > menuitem { pointer-events: all; opacity:1; }
    menu menuitem a { white-space:nowrap; display:block; }
       
    menuitem:hover > menu {
       pointer-events:initial;
    }
    menuitem:hover > menu > menuitem,
    menu:hover > menuitem{
       opacity:1;
    }
    nav > menu > menuitem menuitem menu {
       -webkit-transform:translateX(100%);
               transform:translateX(100%);
       top:0; right:0;
    }
    /* User Styles Below Not Required */
    /* User Styles Below Not Required */
    /* User Styles Below Not Required */
    
    nav { 
       margin-top: 40px;
       margin-left: 40px;
    }
    
    nav a {
       background:#75F;
       color:#FFF;
       min-width:190px;
       -webkit-transition: background 0.5s, color 0.5s, -webkit-transform 0.5s;
       transition: background 0.5s, color 0.5s, -webkit-transform 0.5s;
       transition: background 0.5s, color 0.5s, transform 0.5s;
       transition: background 0.5s, color 0.5s, transform 0.5s, -webkit-transform 0.5s;
       margin:0px 6px 6px 0px;
       padding:20px 40px;
       -webkit-box-sizing:border-box;
               box-sizing:border-box;
       border-radius:3px;
       -webkit-box-shadow: 0px 2px 4px rgba(0, 0, 0, 0.5);
               box-shadow: 0px 2px 4px rgba(0, 0, 0, 0.5);
       position:relative;
    }
    
    nav a:hover:before {
       content: '';
       top:0;left:0;
       position:absolute;
       background:rgba(0, 0, 0, 0.2);
       width:100%;
       height:100%;
    }
    
    nav > menu > menuitem > a + menu:after{
       content: '';
       position:absolute;
       border:10px solid transparent;
       border-top: 10px solid white;
       left:12px;
       top: -40px;  
    }
    nav menuitem > menu > menuitem > a + menu:after{ 
       content: '';
       position:absolute;
       border:10px solid transparent;
       border-left: 10px solid white;
       top: 20px;
       left:-180px;
       -webkit-transition: opacity 0.6, -webkit-transform 0s;
       transition: opacity 0.6, -webkit-transform 0s;
       transition: opacity 0.6, transform 0s;
       transition: opacity 0.6, transform 0s, -webkit-transform 0s;
    }
    
    nav > menu > menuitem > menu > menuitem{
       -webkit-transition: opacity 0.6s, -webkit-transform 0.6s;
       transition: opacity 0.6s, -webkit-transform 0.6s;
       transition: transform 0.6s, opacity 0.6s;
       transition: transform 0.6s, opacity 0.6s, -webkit-transform 0.6s;
       -webkit-transform:translateY(150%);
               transform:translateY(150%);
       opacity:0;
    }
    nav > menu > menuitem:hover > menu > menuitem,
    nav >.........完整代码请登录后点击上方下载按钮下载查看