/*
.main-navigation li ul li {
  border-top: 0;
}
*/

nav {
  /*font-family: Ubuntu, sans-serif;*/
  --my-nav-color: rgba(166, 213, 217, 1.0);
  --my-nav-item-color: rgba(23, 91, 100, 0.75);
  --my-link-color: rgba(103, 201, 210, 1.0);
  /*display: flex;*/
  /*height: 30px;*/
  font-variant: small-caps;
  font-size: 1.2em;
  box-shadow: rgb(38, 57, 77) 0px 20px 30px -10px;
}

/* Set the parent <li>’s CSS position property to ‘relative’. */
nav ul {
  list-style: none;
  padding: 0;
  margin: 0;
  background: var(--my-nav-color);
}

nav ul li {
  display: block;
  position: relative;
  float: left;
  /*background: #1bc2a2;*/
  background-color: var(--my-nav-item-color);
}

/* The CSS to hide the sub menus. */
nav li ul {
  display: none;
}

nav ul li a {
  display: block;
  padding: 0.75rem 1.5rem 0.75rem 1.5rem;  /* oben rechts unten links */
  text-decoration: none;
  white-space: nowrap;
  color: #fff;
}

nav ul li a:hover {
  background: #2c3e50;
  /*background-color: var(--my-nav-item-color);*/
}

/* Displays the dropdown menu on hover. */
nav li:hover > ul {
  display: block;
  position: absolute;
}

nav li:hover li {
  float: none;
}

nav li:hover a {
  /*background: #1bc2a2;*/
  background-color: var(--my-nav-item-color);
}

nav li:hover li a:hover {
  background: #2c3e50;
  /*background-color: var(--my-nav-item-color);*/
}

/* Displays second level dropdown menus to the right of the first level dropdown menu. */
nav ul ul ul {
  left: 100%;
  top: 0;
}

nav .extra {
  float: right;
}

/* Simple clearfix. */
nav ul:before,
nav ul:after {
  content: " ";
  /* 1 */
  display: table;
  /* 2 */
}

nav ul:after {
  clear: both;
}