Dropdown-menu op website lukt maar niet... :(

Status
Niet open voor verdere reacties.

milan0132

Gebruiker
Lid geworden
13 nov 2016
Berichten
10
Beste forumleden, ik heb een vraag over mijn CSS-code:

Ik moet voor school (4 Havo informatica) een website over mezelf maken. Hierbij mag je volledig gebruik maken van internet, maar de docent mag je niet helpen. Nu vind ik het mooi om op m'n website een dropdown-menu te hebben, dit is tevens ook verplicht. Ik ben hier constant mee bezig geweest en heb voor hulp deze site gebruikt:

http://www.w3schools.com/css/tryit.asp?filename=trycss_dropdown_navbar[/url]

Het staat volgens mij echt ontzettend duidelijk op de site, maar het lukt me steeds maar niet. Ik kan de items onder elkaar zetten, maar het lukt maar niet om ervoor te zorgen dat de menu-items naar beneden gaan als je er met je muis overheen gaat. Kunnen jullie me misschien helpen? Mijn code is hier te downloaden:

https://mega.nz/#!icIFlIIA!TMzKmA0vk5LD2g1x4WfIet_Dzee53VT7uGvHTDqDUYY[/url]

Alvast echt ONTZETTEND bedankt :)

Met vriendelijke groet,

Milan

HTML:
PS. Ik zal de code ook hieronder zetten, maar ik weet niet zeker of dat mag volgens de regels:
<!DOCTYPE html>
<html>
    <head>
        <meta charset="utf-8">
        <title>Website over mij</title>
	<style>
		body {
  margin: 0;
  padding: 0;
  background-image: url("background.jpg");
}
 
.navigatie ul {
	list-style: none;
	background-color: #444;
	text-align: center;
	padding: 0;
	margin: 0;
}
.navigatie li {
	font-family: 'Century Gothic', sans-serif;
	line-height: 40px;
	height: 40px;
	border-bottom: 1px solid #888;
	float: center;
}
 
.navigatie a {
	text-decoration: none;
	color: white;
	display: block;
	transition: .3s background-color;
	font-weight: bold;
	font-size:21px
}
 
.navigatie a:hover {
  background-color: #e84c3d;
	}
 
.navigatie a.active {
	background-color: #fff;
	color: #444;
	cursor: default;
	}

.dropdown-content {
    display: block
    position: absolute;
    background-color: #f9f9f9;
    min-width: 160px;
    box-shadow: 0px 8px 16px 0px rgba(0,0,0,0.2);
}

.dropdown-content a {
    color: black;
    padding: 12px 16px;
    text-decoration: none;
    display: block;
    text-align: left;
}

.dropdown-content a:hover {background-color: #f1f1f1}


<!--@media screen and (min-width: 600px) {
  .navigatie li {
    width: 120px;
    border-bottom: none;
    height: 50px;
    line-height: 50px;
	}
 
  .navigatie li {
    display: inline-block;
    margin-right: -4px;
	}-->
	

	</style>
    </head>
    <body>
<body>
  <header>
    <div class="navigatie">
      <ul>
        <li><a href="#">Home</a></li>
        <li><a href="#">Over mij</a></li>
		<li class=dropdown">
			<a href="#" class="dropbtn">Hobby's</a>
			<div class="dropdown-content">
				<a href="#">Link 1</a>
				<a href="#">Link 2</a>
				<a href="#">Link 3</a>
        <li><a href="#">Games</a></li>
        <li><a href="#">Bedrijf</a></li>
      </ul>
    </div> <!-- einde div navigatie -->
	<h1> Hoi! Welkom op mijn website :-).</h1>
  </header>
      </body>
</html>
 
Laatst bewerkt:
Hoi,

Regel 1 voor iedere coder: werk netjes!!
Een paar fouten die je moet corrigeren en dan weer verder met je probleem :)

< !-- .... -- > mag niet in css. Gebruik /* .... */
Je hebt twee keer een<body>
Je bent een " vergeten in class=dropdown"
Je hebt geen afsluitende </div> en </li> onder link 3
In de css een puntkomma vergeten achter display: block

Ik weet niet of het hiermee is opgelost maar sowieso moeten eerst alle fouten eruit.

Suc6. Have fun.
 
Echt ontzettend bedankt! Ik ben echt al heel veel wijzer geworden en heb mijn code aangepast en het op een net andere manier aangepakt. Het dropdown-menu werkt nu zoals ik wil! Maar is mijn code nu technisch correct?

Hier is de link: http://www.w3schools.com/code/tryit.asp?filename=F0RM8RSHB0E3

HTML:
<!DOCTYPE html>
<html>
    <head>
        <meta charset="utf-8">
        <title>Website over mij</title>
    <style>
        body {
  margin: 0;
  padding: 0;
  background-image: url("background.jpg");
}
.navigatie ul {
  list-style: none;
  background-color: #444;
  text-align: center;
  padding: 0;
  margin: 0;
}

.navigatie li {
  font-family: 'Abel', sans-serif;
  font-size: 1.2em;
  line-height: 40px;
  text-align: left;
  font-weight: normal;
}

.navigatie a {
  text-decoration: none;
  color: white;
  display: block;
  padding-left: 15px;
  border-bottom: 1px solid #888;
  transition: .3s background-color;
}

.navigatie a:hover {
  background-color: #e84c3d;
}

.navigatie a.active {
  background-color: #aaa;
  color: #444;
  cursor: default;
}

/* Submenu's */
.navigatie li li {
  font-size: .8em;
}

/*Dit onderdeel van de CSS zorgt ervoor dat het menu responsive wordt vanaf 650 pixels breedte.
Dit is een CSS-comment, mooi hé :-)*/
@media screen and (min-width: 650px) {
  .navigatie li {
    width: 130px;
    border-bottom: none;
    height: 50px;
    line-height: 50px;
    font-size: 1.4em;
    display: inline-block;
    margin-right: -4px;
  }

  .navigatie a {
    border-bottom: none;
  }

  .navigatie > ul > li {
    text-align: center;
  }

  .navigatie > ul > li > a {
    padding-left: 0;
  }

  /* Submenu's */
  .navigatie li ul {
    position: absolute;
    display: none;
    width: inherit;
  }

  .navigatie li:hover ul {
    display: block;
  }

  .navigatie li ul li {
    display: block;
  }
  </style>
 
  <body>
  <header>
    <div class="navigatie">
      <ul>
        <li><a class="active" href="#">Home</a></li>
        <li><a href="#">Over mij</a>
          <ul>
            <li><a href="#">Lorem Ipsum</a></li>
            <li><a href="#">Lorem Ipsum</a></li>
            <li><a href="#">Lorem Ipsum</a></li>
          </ul>
        </li>
        <li><a href="#">Hobby's</a>
          <ul>
            <li><a href="#">Lorem Ipsum</a></li>
            <li><a href="#">Lorem Ipsum</a></li>
            <li><a href="#">Lorem Ipsum</a></li>
          </ul>
        </li>
        <li><a href="#">Games</a>
          <ul>
            <li><a href="#">Lorem Ipsum</a></li>
            <li><a href="#">Lorem Ipsum</a></li>
            <li><a href="#">Lorem Ipsum</a></li>
          </ul>
        </li>
        <li><a href="#">Mijn bedrijf</a>
          <ul>
            <li><a href="#">Lorem Ipsum</a></li>
            <li><a href="#">Lorem Ipsum</a></li>
            <li><a href="#">Lorem Ipsum</a></li>
          </ul>
 
Je vergeet vaak afsluit tags, bijvoorbeeld bij een <div> hoort een </div>
Gebruik je een goede code editor? Bijvoorbeeld Notepad++

Je code heb ik overdreven laten inspringen zodat je goed de structuur kan zien. Leer dit "inspringen" vanaf het begin aan!! Het is de beste manier om goed te structureren met de minste fouten. In sommige programmeertalen is dit zelfs verplicht.

Er zijn slechts enkele tags zonder afsluit tag. Voor een beginner zijn de belangrijkste
in de head: <meta> <link>
in de body: <br> <hr> <img> <input>

Het is gebruikelijk dat html (structuur en content) en css (positionering en opmaak) elk in een eigen bestand staan. Dit is gedaan zodat je css op verschillende pagina's kan gebruiken en het onderhoud eenvoudiger is.

Het html bestand met daaronder het css bestand. Ik heb niet gekeken naar de werking.
Code:
<!DOCTYPE html>
<html>
   <head>
      <meta charset="utf-8">
      <title>Website over mij</title>
      <link rel="stylesheet" type="text/css" href="style.css">
   </head>
   <body>
      <header>
         <div class="navigatie">
            <ul>
               <li><a class="active" href="#">Home</a></li>
               <li><a href="#">Over mij</a>
                  <ul>
                     <li><a href="#">Lorem Ipsum 1</a></li>
                     <li><a href="#">Lorem Ipsum 2</a></li>
                     <li><a href="#">Lorem Ipsum 3</a></li>
                  </ul>
               </li>
               <li><a href="#">Hobby's</a>
                  <ul>
                     <li><a href="#">Lorem Ipsum 4</a></li>
                     <li><a href="#">Lorem Ipsum 5</a></li>
                     <li><a href="#">Lorem Ipsum 6</a></li>
                  </ul>
               </li>
               <li><a href="#">Games</a>
                  <ul>
                     <li><a href="#">Lorem Ipsum 6</a></li>
                     <li><a href="#">Lorem Ipsum 7</a></li>
                     <li><a href="#">Lorem Ipsum 8</a></li>
                  </ul>
               </li>
               <li><a href="#">Mijn bedrijf</a>
                  <ul>
                     <li><a href="#">Lorem Ipsum A</a></li>
                     <li><a href="#">Lorem Ipsum B</a></li>
                     <li><a href="#">Lorem Ipsum C</a></li>
                  </ul>
               </li>
            </ul>
         </div>
      </header>
   </body>
</html>

BESTAND "style.css"

body {
   margin: 0;
   padding: 0;
   background-image: url("background.jpg");
}
.navigatie ul {
   list-style: none;
   background-color: #444;
   text-align: center;
   padding: 0;
   margin: 0;
}
.navigatie li {
   font-family: 'Abel', sans-serif;
   font-size: 1.2em;
   line-height: 40px;
   text-align: left;
   font-weight: normal;
}
.navigatie a {
   text-decoration: none;
   color: white;
   display: block;
   padding-left: 15px;
   border-bottom: 1px solid #888;
   transition: .3s background-color;
}
.navigatie a:hover {
   background-color: #e84c3d;
}
.navigatie a.active {
   background-color: #aaa;
   color: #444;
   cursor: default;
}
/* Submenu's */
.navigatie li li {
   font-size: .8em;
}
/* het menu responsive vanaf 650 pixels breedte */
@media screen and (min-width: 650px) {
   .navigatie li {
      width: 130px;
      border-bottom: none;
      height: 50px;
      line-height: 50px;
      font-size: 1.4em;
      display: inline-block;
      margin-right: -4px;
   }
   .navigatie a {
      border-bottom: none;
   }
   .navigatie > ul > li {
      text-align: center;
   }
   .navigatie > ul > li > a {
      padding-left: 0;
   }
   /* Submenu's */
   .navigatie li ul {
      position: absolute;
      display: none;
      width: inherit;
   }
   .navigatie li:hover ul {
      display: block;
   }
   .navigatie li ul li {
      display: block;
   }
}

Suc6 met html en css.
 
Laatst bewerkt:
Status
Niet open voor verdere reacties.
Steun Ons

Nieuwste berichten

Terug
Bovenaan Onderaan