HTML/CSS/JS - Varför funkar inte min dropdown?

Trädvy Permalänk
Medlem
Plats
Frösön
Registrerad
Okt 2015

HTML/CSS/JS - Varför funkar inte min dropdown?

Jag håller på att göra en hemsida på skolan, och vill ha en dropdown meny i min navbar, men den vill inte funka.

Här är en fiddle
Och jag följde den här guiden

Jag skulle så klart fråga min lärare, men jag är på praktik och de har inget jobb åt mig just nu, och därför jobbar jag med hemsidan.

I can't type and explain. What do I look like ? A Thread?

CPU: Intel Core i5 4690k
GPU: ASUS GTX 1080 8GB
RAM: DDR3 16 GB

Trädvy Permalänk
Medlem
Plats
Halland
Registrerad
Okt 2013

Din .dropdown klass har en "position: relative;" från din bootstrap css som gör att den positionerar sig innanför menyn istället för att poppa ut.

Trädvy Permalänk
Medlem
Plats
Frösön
Registrerad
Okt 2015
Skrivet av Terrell:

Din .dropdown klass har en "position: relative;" från din bootstrap css som gör att den positionerar sig innanför menyn istället för att poppa ut.

Tack! Jag lade till en "position: static;" i .dropdown.

I can't type and explain. What do I look like ? A Thread?

CPU: Intel Core i5 4690k
GPU: ASUS GTX 1080 8GB
RAM: DDR3 16 GB

Trädvy Permalänk
Medlem
Plats
Halland
Registrerad
Okt 2013

Utöver detta har du en div i din <ul> vilket är felaktig html och genom att flytta in den så att den omkapslar innehållet i din <li> så löser du ditt andra problem

<li class="navItem"><div class="dropdown"><a class="dropbtn navLink" onclick="dropdownFunction()"><small><span class="glyphicon glyphicon-pawn"></span></small> Games</a> <div class="dropdownContent" id="gameDropdown"> <a href="breakoutraw.html">Breakout using raw JS</a> <a href="breakoutphaser.html">Breakout using Phaser</a> <a href="platformer.html">Platformer using Phaser</a> <a href="spaceinvaders.html">Space Invaders</a> </div> </div></li>