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