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,.........完整代码请登录后点击上方下载按钮下载查看