.navbar{
  z-index: 10;
}
ul.navbar  {
    list-style-type: none;
    position: fixed;
    top: 0;
    left:0;
    width: 100%;
    margin: 0;
    padding: 0;
    overflow: hidden;
    background-color: white;
    box-shadow: 0 4px 4px 0 rgba(0,0,0,0.2);

}

li.navbar  {
    float: left;

}

.navbar li a {
    display: block;
    color: black;
    text-align: center;
    padding: 14px 16px;
    text-decoration: none;
}

/* Change the link color to #111 (black) on hover */

.navbar li a:hover {
  box-shadow: 0 8px 16px 0 rgba(0,0,0,0.2);

}
.navbar a.active {
    background-color: #4CAF50;
}

.dropdown ul {
  visibility: hidden;
  opacity: 0;
  position: absolute;
  transition: all 0.5s ease;
  margin-top: 1rem;
  left: 0;
  display: none;
}

.dropdown li:hover > ul,
ul li ul:hover {
  visibility: visible;
  opacity: 1;
  display: block;
}

ul li ul li {
  clear: both;
  width: 100%;
}