body{font-family:sans-serif;}
.wrapper{width:100%;height:80vh;background-color:#f0f0f0;text-align:center;padding-top:5em;}
.main-menu{text-align:left;display:inline;}
.main-menu a, .main-menu a:hover{text-decoration:none}
.main-menu{list-style:none;padding:0;margin:0}
.main-menu li{display:block;padding:0;position:relative;vertical-align:top}
.main-menu > li{background-color:#f0f0f0;color}
.main-menu > li > a{background-color:#f0f0f0;color;display:block;padding:.75em 1.25em;}
.main-menu ul.sub-menu{position:relative;padding:0}
.main-menu ul.sub-menu li{display:block}
.main-menu ul.sub-menu a{background-color:#666;color:#fff;padding:.75em 1.25em;display:block}
.main-menu > li:hover ul.sub-menu{}
.main-menu li{display:inline-block;}
  .main-menu > li > a{display:block;}
      .main-menu > li > a:hover{background-color:#f0f0f0;color:#039}
      
  .main-menu > li:hover ul.sub-menu, .main-menu > li:focus ul.sub-menu{visibility: visible;opacity:1}
  .main-menu > li.menu-item-has-children{padding-right:1.5em;overflow:hidden}
  .main-menu > li.menu-item-has-children a{padding:.75em .7em .7em 1.25em}
      .main-menu > li.menu-item-has-children:hover a{background-color:#666;color:#fff}
      
  .main-menu > li.menu-item-has-children:after{content:'';position:absolute;right:.5em;top:1.2em;width: 0;height: 0;border-style: solid;border-width: 6px 5px 0 5px;border-color: #007bff transparent transparent}
  
  .main-menu > li.menu-item-has-children:hover,
  .main-menu > li.menu-item-has-children:focus{overflow:visible;background-color:#666}
  
  .main-menu ul.sub-menu{width:20em;position:absolute;/*top:100%;*/top:0;z-index:900;padding-top:3em;}
    .main-menu ul.sub-menu li{opacity:0}

  .main-menu > li.menu-item-has-children:hover ul.sub-menu,
  .main-menu > li.menu-item-has-children:focus ul.sub-menu{top:100%;padding-top:0;}

  .main-menu > li.menu-item-has-children:hover ul.sub-menu li,
  .main-menu > li.menu-item-has-children:focus ul.sub-menu li{opacity:1}

  .main-menu ul.sub-menu li{display:block}
  .main-menu ul.sub-menu a{display:block}
      .main-menu ul.sub-menu a:hover{background-color:#999;}

a, .sub-menu, .menu-item{-webkit-transition: all .1s ease-out;
-moz-transition: all .0.5s ease-out;
-ms-transition: all .0.5s ease-out;
-o-transition: all .0.5s ease-out;
transition: all .0.5s ease-out;}