I would like to apply the margins of child li for the parent li elements as well.
With this code, the submenu of "Projekte" is crossing the borders of "Kontakt" below.
Thank you for helping in advance!

```css
#hide {
  display: none;
}

#projekte:hover #hide {
  display: block;
}

li {
  width: 80px;
  height: 30px;
  border-bottom: 1px solid;
  margin-top: 50px;
}

a {
  color: grey;
  text-decoration: none;
}

ul {
  list-style-type: none;
}

a:hover {
  color: blue;
}
```

```html
<h1>Navigationsmen&uuml;</h1>
<br />
<br />
<ul>
  <li><a href="">Home</a></li>
  <li id="projekte">
    <a href="projektuebersicht.html">Projekte</a>
    <ul id="hide">
      <li><a href="projekt1.html">Projekt 1</a></li>
      <li><a href="projekt2.html">Projekt 2</a></li>
    </ul>
  </li>
  <li><a href="mailto:">Kontakt</a></li>
</ul>
```