Hey,
Ik heb een klein probleempje.
Ik heb een redelijke simpele website in elkaar gezet maar nu wil ik van het menu een drop-down menu maken.
Heb overal gezocht. Alleen het wil maar niet lukken. Dus ik vroeg mij af of een van jullie mij zouden kunnen/willen helpen?
Dit is mijn HTML en CSS.
Graag zou ik bij Intresses een Dropdown menu hebben.
Alleen zonder dat de rest van mijn uiterlijk of website veranderd.
Alvast hartelijk Bedankt.
Groetjes,
Feikoboy
Ik heb een klein probleempje.
Ik heb een redelijke simpele website in elkaar gezet maar nu wil ik van het menu een drop-down menu maken.
Heb overal gezocht. Alleen het wil maar niet lukken. Dus ik vroeg mij af of een van jullie mij zouden kunnen/willen helpen?
Dit is mijn HTML en CSS.
HTML:
<!DOCTYPE html>
<html>
<head>
<title>Amy - Home </title>
<link rel="shortcut icon" href="http://www.iconj.com/ico/2/b/2bkdrwwdqh.ico" type="image/x-icon" />
<link href="style.css" rel="stylesheet" type="text/css">
<meta http-equiv="Content-Type" content="text/html;charset=utf8">
</head>
<body>
<div class="main">
<h1> Hello thar!
<img id="logo1" src="Header/headermr.png" alt="headermr">
<img id="logo2" src="Header/headerlg.png" alt="headerlg">
<img id="logo3" src="Header/headerfl.png" alt="headerfl">
<img id="logo4" src="Header/headerbs.png" alt="headerbs">
</h1>
<ul id="top_menu">
<li><a href="index.html">Home</a></li>
<li><a href="overmij.html">Over mij</a></li>
<li><a href="contact.html">Contact</a></li>
<li><a href="#about">Interesses</a></li>
</ul>
<h2>Hartelijk welkom!</h2>
<div class="text">
<p>
Ik ben Amy! En tevens ook de maakster van deze 'website'!
<br>
<br>
Op deze website vind je allemaal informatie over mij en wat ik leuk vind.
<br>
LET OP! HIJ IS NOG IN AANBOUW.
<br>
<br>
Hoop dat jullie er wat van vinden.
<br>
<br>
Groetjess
<br>
Amy van der meer.
</p>
</div>
</div>
</body>
</html>
Code:
*{
margin: 0;
padding: 0;
}
html{
background-color: rgba(149,222,255,1.0);
Background-image: url(Body/bkground.jpg);
background-repeat:repeat-x;
background-position: bottom;
min-height: 100%;
}
div.main{
width: 800px;
background-color: rgba(124,252,0,0.6);
border: solid darkgreen 5px;
border-radius: 60px;
text-align: center; /* ie hack */
margin: auto;
margin-top: 10px;
margin-bottom: 10px;
padding: 12px;
font-family: verdana;
font-size: 15px;
}
div.text{
position: relative;
background-color: rgba(255,250,240,0.8);
border: solid darkgreen 3px;
border-radius: 60px;
margin: auto;
margin-top: 10px;
margin-bottom: 10px;
padding: 15px;
}
h1 img{
position: absolute;
top: 2px;
}
#logo1{
left: 10px;
}
#logo2{
left: 85px;
}
#logo3{
right: 40px;
}
#logo4{
right: 90px;
}
#amy{
border: solid darkgreen 3px;
border-radius: 60px;
display: block;
margin: auto;
}
#socialfb{
Position:absolute;
left: 225px;
top: -2.0px;
}
#socialtwit{
position: absolute;
right: 235px;
top: -2.0px;
}
h1{
background-image: url(Header/h1bk.jpg);
border: solid darkgreen 3px;
position: relative;
font-family: Georgia;
border-radius: 60px;
font-weight: bold;
color: white;
margin: auto;
padding: 25px;
font-size: 30pt;
}
h2 {
position: relative;
background-image: url(Header/h2bk.jpg);
border-radius: 60px;
border: solid darkgreen 3px;
font-style:italic;
font-family: Georgia;
color: black;
padding: 6px;
font-size: 18pt;
margin: auto;
}
#top_menu{
text-align: center;
list-style-type:none;
overflow: hidden;
margin: auto;
margin-top: 15px;
margin-bottom: 15px;
}
#top_menu li{
display:inline;
}
#top_menu a:link, #top_menu a:visited{
display:inline-block;
width:130px;
font-weight:bold;
color:#FFFFFF;
background-color:#98bf21;
text-align:center;
padding:8px;
text-decoration:none;
border-radius: 60px;
}
#top_menu a:hover, #top_menu a:active{
background-color:#7A991A;
}Graag zou ik bij Intresses een Dropdown menu hebben.
Alleen zonder dat de rest van mijn uiterlijk of website veranderd.
Alvast hartelijk Bedankt.
Groetjes,
Feikoboy
Laatst bewerkt door een moderator:
aangezien het internet vol staat met CSS tutorials voor menu's. In de bijlage vind je een voorbeeldje hiervan. Ik hoop dat je daarmee verder komt. 
