HTML:
<!DOCTYPE HTML>
<html>
<head>
<title>13</title>
<link rel="stylesheet" type="text/css" href="style.css">
<script src="http://ajax.googleapis.com/ajax/libs/jquery/1.10.2/jquery.min.js"></script>
<script type="text/javascript">
$(document).ready(function(){
$("#overonsuitwerking").hide();
});
$(document).ready(function(){
$('.overons').click(function(){
$('#overonsuitwerking').slideToggle();
})
})
</script>
</head>
<body>
<div id="header">
Naam Bedrijf
</div>
<div id="windows8">
<ul>
<li class="overons">
<div id="overons"><a href="#">Over Ons</a></div>
<div id="overons2">Hierkomt de tekst voor je bedrijf</div>
</li>
<li class="home">
<div id="home">Welkom op onze Site!</div>
<br><br><br><br>
<a href="#">HOME</a>
</li>
<div id="overonsuitwerking">
Hier kunt u uw informatie neerzetten over uw bedrijf.
<br>
<br>
hallo
<br>
hallo
</div>
<li><a href="#"></a>
<img src="leaf1.jpg">
</li>
<li class="service">
<div id="image"><a href="#"><img src="service.png"></a></div>
<br><br><br><br><br>
<a href="#">SERVICES</a>
</li>
<li>
<img src="water2.jpg">
</li>
<li class="social">
<div id="image2"><a href="#"><img src="facebook-icon.gif"></div>
<div id="image3"><a href="#"><img src="twitter1.png"></div>
<br>
<a href="#">SOCIAL</a>
</li>
<li><a href="#"></a>
<img src="bird1.jpg">
</li>
<li class="contact">
<div id="image4"><a href="#"><img src="contact.png"></a></div>
<a href="#">CONTACT</a>
</li>
</ul>
</div>
<div id="footer">
<p class="footer">Designed by <i><a href="http://www.silverworx.nl">Silverworx</a></i></p>
</div>
</body>
</html>
HTML:
html, body, div, span, applet, object, iframe, h1, h2, h3, h4, h5, h6, p, blockquote, pre, a, abbr, acronym, address, big, cite, code, del, dfn, em, img, ins, kbd, q, s, samp, small, strike, strong, sub, sup, tt, var, b, u, i, center, dl, dt, dd, ol, ul, li, fieldset, form, label, legend, table, caption, tbody, tfoot, thead, tr, th, td,
article, aside, canvas, details, embed, figure, figcaption, footer, header, hgroup, menu, nav, output, ruby, section, summary, time, mark, audio, video {
margin: 0;
padding: 0;
border: 0;
font-size: 100%;
font: inherit;
vertical-align: baseline;
}
body {
margin: 0;
}
p {
margin: 0;
}
body {
background: radial-gradient(#484848, #000);
}
#header {
margin-left: 9.5%;
margin-top: 40px;
color: #fff;
font-family: Verdana;
font-size: 40px;
height: 70px;
width: 20%;
}
#windows8 {
margin: 20px auto;
height: 600px;
width: 80%;
padding: 0;
border: 1px solid #fff;
}
#windows8 ul {
margin: 0;
padding: 0;
}
#windows8 li {
margin: 5px;
height: 190px;
width: 32.4%;
float: left;
background: #fff;
list-style: none;
}
#windows8 ul li a {
list-style: none;
text-decoration: none;
color: #000;
padding: 0;
}
#windows8 .overons {
height: 190px;
margin: 5px;
width: 65.8%;
background: #990066;
float: left;
}
#windows8 .overons a {
color: #fff;
}
#overons {
margin-top: 20px;
margin-left: 75px;
color: #fff;
font-family: Verdana;
font-size: 30px;
}
#overons2 {
margin-top: 25px;
margin-left: 75px;
color: #fff;
font-family: Verdana;
font-size: 15px;
}
#overonsuitwerking {
background: #fff;
margin-top: 5px;
margin-left: 1%;
width: 99%;
font-family: Verdana;
font-size: 15px;
color: #fff;
height: 100px;
}
#windows8 .home {
margin: 5px;
height: 190px;
width: 32.3%;
float: left;
background: #CCFF00;
list-style: none;
font-size: 25px;
color: #000;
font-family: Verdana;
}
#home {
margin-top: 20px;
margin-left: 0px;
text-align: center;
font-family: Verdana;
font-size: 16px;
}
#windows8 .home a {
color: #fff;
}
#windows8 .service {
margin: 5px;
height: 190px;
width: 350px;
float: left;
background: #404040 ;
list-style: none;
font-size: 25px;
font-family: Verdana;
color: #fff;
}
#windows8 .service a {
color: #fff;
}
#image {
position: absolute; top: 350px; left: 590px;
height: 128px;
width: 128px;
}
#windows8 .social {
background: #CC6600;
list-style: none;
font-size: 25px;
font-family: Verdana;
}
#windows8 .social a {
color: #fff;
}
#windows8 .social #image2 {
margin-top: 42px;
margin-left: 22%;
height: 76px;
width: 76px;
float: left;
}
#windows8 .social #image3 {
margin-top: 42px;
margin-left: 52%;
height: 76px;
width: 74px;
}
#windows8 .contact {
float: left;
background: #0066FF;
list-style: none;
font-size: 25px;
font-family: Verdana;
color: #fff;
}
#windows8 .contact a {
color: #fff;
}
#windows8 .contact #image4 {
margin-top: 15px;
margin-left: 32%;
height: 128px;
width: 30%;
}
#footer {
margin-top: 20px;
height: 150px;
width: 100%;
}
#footer .footer {
margin-top: 120px;
text-align: center;
font-family: Verdana;
font-size: 13px;
color: #fff;
text-decoration: none;
}
.footer a {
text-decoration: none;
color: #fff;
}
.footer a:visited {
color: #fff;
}
.footer a:hover {
text-decoration: underline;
}Dit is een HTML (met Javascript erin) en een CSS bestand.
Ik wil dat als je op .overons klikt dat dan #overonsuitwerking eronderuit komt, alleen in het begin komt #overonsuitwerking er onderuit en dan schiet ie opeens helemaal naar boven, waardoor die achter de li's .overons en .home komt, hoe zorg ik ervoor dat #overonsuitwerking onder .home en .overons komt?
