在父元素的子元素的 ul 中应用边距

Question

我也想为父 li 元素应用子 li 的边距。使用此代码，“Projekte”的子菜单跨越了下方“Kontakt”的边界。感谢您提前提供帮助！

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

Answer 1

这里的技巧是为 #projekte:hover #hide li 元素添加边距

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

Answer 2

您可以将位置参数添加到 #projekte:hover #hide：position: relative 以便能够创建偏移量并根据 top 和 left 值：

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

在父元素的子元素的 ul 中应用边距

apply margins in ul of child elements for parent elements

html

css

html-lists