Question

我正在为我的网站编写HTML代码，而且我遇到了问题，每当我启用布局时，下拉菜单就会变得透明我的CSS文件没有导致问题，我测试了好几次！（请忽略外语）

<ul>
  <li><a class="active" href="index.html">Kezdőlap</a></li>
  <li><a href="news.html">Hírek</a></li>
  <li style="float:right"><a href="contact.html">Kapcsolat</a></li>
  <li class="dropdown">
    <a href="#" class="dropbtn">Szervereink</a>
    <div class="dropdown-content">
      <a href="#">TeamSpeak 3</a>
      <a href="#">CS:S</a>
      <a href="#">Klán szerverek</a>
    </div>
  </li>
</ul>

如果我发出以下代码注释，下拉菜单会再次开始工作，但如果我不这样做就会变得透明！

<div class="right">
<h1>Legújabb Hírek</h1>
<p>Counter Strike:Source</p>
<p>A CS:S szerverünk most esett át egy nagy frissítésen! SaySounds és RoundEndSounds</p>
<ul>
  <li><a href="news.html">Hírek oldal</a></li> 
</ul>
</div>
<div class="main">
<h1>Köszöntelek a Fluffy Killers Weboldalán!</h1>
<p>A csapatunk nagyon kicsi, és tanulóképes! A csapatunk, Source Engines szervereket hostol, configol, Versenyszerűen játszunk! Csatlakozhatsz a kis csapatunkhoz a Steam csoportunkon keresztül!</p>
<a href="http://steamcommunity.com/groups/FlaffahKallars">Fluffy Killers Steam Csoport</a>

注意：Class Main是网站的内容，Class Right是侧边栏

补充工具栏和主要课程

.right {
    position:absolute;
    right: 100px; top:50px; bottom: 0px;
    width: 200px;
}
.main {
    position: absolute;
    left:10px; top:50px; right:100px; bottom:0;
}

Answer 1

问题不在于它是否透明，问题在于.main和.right部分是绝对定位的。尝试在这些部分中删除position：absolute - 并在其中使用margin-top或padding-top。

.right {
  float:right;
  width: 200px;
  padding-top:10px;
}

.main {
  padding-top: 10px;
}

查看绝对位置和位置相对属性 - 一旦掌握了这些属性，你就会非常不可阻挡。

HTML下拉菜单透明

1 个答案: