KillerDoge KillerDoge - 3 months ago 10
HTML Question

HTML Dropdown menu transparent

I am currentry writing HTML code for my website, and I've run into a problem, whenever I enable the layout, the dropdown menu becomes transparent
My CSS file is not causing the problem, I tested it several times!
(Please ignore foreign language)

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


If I make the following code comment, the dropdown menu starts working again, but If I don't it simply goes transparent!

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


NOTES: Class Main is the content of the site, Class Right is a sidebar

Sidebar and Main classes

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

Answer

The issue isn't that it's transparent, the issue is that the .main and .right sections are positioned absolutely. Try removing position:absolute in these sections - and using margin-top or padding-top in it's place.

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

.main {
  padding-top: 10px;
}

Look into position absolute and position relative properties -- once you master those, you'll be very unstoppable.