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

【问题标题】：apply margins in ul of child elements for parent elements在父元素的子元素的ul中应用边距
【发布时间】：2022-01-03 22:16:40
【问题描述】：

我也想为父 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>

【问题讨论】：

标签： html css html-lists

【解决方案1】：

您可以将位置参数添加到#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>

【讨论】：

非常感谢，这样更好！

【解决方案2】：

这里的诀窍是为#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;
}

【讨论】：

非常感谢！