apply margins in ul of child elements for parent elements-CodePudding

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!

#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;
}

<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>

CodePudding user response：

You can add position parameters to #projekte:hover #hide: position: relative to be able to create an offset and according top and left values:

#hide {
  display: none;
}

#projekte:hover #hide {
  display: block;
  position: relative;
  left: 60px;
  top: -230%;
}

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;
}

<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>

CodePudding user response：

the trick here is to add margin for #projekte:hover #hide li element

<body>
    <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>       
</body>

#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;}
    
    #projekte:hover #hide li {
    margin-left: 80px;
    margin-top: 20px;
}