body {
  font-size: 20px;
}

.navbar {
  position: -webkit-sticky; /* Safari */
  position: sticky; /* If enabled it breaks dropdown menu */
  top: 0;
z-index:40;

 background-color: #00C4C4;
box-shadow: 3px 5px 7px #666060;
position: sticky;
    top: 0;


}

ul {
  list-style-type: none;
  margin: 0;
  padding: 0;
  overflow: hidden;
  background-color: #00CCCC;
}

li {
  float: left;
}

li a,
.mDrop {
  display: block;
  color: white;
  text-align: center;
  padding: 5px 16px;
  text-decoration: none;

}

.mDrop li:nth-of-type(-n + 1) {
  float: down;
}
.mDrop {
  position: relative;
  top: 2.6rem;
}

li .mDrop {
  visibility: hidden;
  opacity: 0;
  width: 161px;
  position: absolute;
  top: 9px;
  transition: all 0.5s ease;
  margin-top: 1.5rem;
  display: none;
box-shadow: 3px 5px 7px #666060;
}

li a:hover,
.mDrop:hover .li:hover {
  background-color: #ddd;
    color: black;
}

li:hover > ul,
li:focus-within > ul,
li ul:hover {
  visibility: visible;
  opacity: 1;
  display: block;
}

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

.active {
  background-color: #009999;
}