將子元素的ul中的邊距應用于父元素-有解無憂

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

uj5u.com熱心網友回復：

您可以添加位置引數#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>

uj5u.com熱心網友回復：

這里的技巧是為#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;
}

轉載請註明出處，本文鏈接：https://www.uj5u.com/qiye/366394.html

標籤：html css html 列表

上一篇：如何讓div占據整個螢屏底部？

下一篇：如何使用Tailwind向我的內容部分添加滾動條？