Ik weer eens begonnen met scripten. In de tijd dat ik nog bezig was maakte ik al mijn websites nog in tabellen, iets dat tegenwoordig niet meer mag. Vroeger plaatste ik mijn vragen vaak op de website wmcity.nl maar deze is min of meer dood heb ik het idee. Vandaar dit ik hier eens binnen loop :-) Ik heb dus nog erg weinig verstand van de divs, en vooral het positioneren hiervan. Nu heb ik het volgende probleem. De html opzet is als volgt.
<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html xmlns="http://www.w3.org/1999/xhtml">
<head>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8" />
<link rel="stylesheet" type="text/css" href="style.css" />
<title>Untitled Document</title>
</head>
<body>
<div class="head">
<div class="title">Titel van pagina</div>
</div>
<div class="dropdowndiv">
<ul id="dropdownmenu">
<li><a href="#">Menu 1</a>
<ul>
<li><a href="#">Sub item 2.1</a></li>
<li><a href="#">Sub item 2.2</a></li>
<li><a href="#">Sub item 2.3</a></li>
<li><a href="#">Sub item 2.4</a></li>
<li><a href="#">Sub item 2.5</a></li>
</ul>
</li>
<li><a href="#">Menu 2</a>
<ul>
<li><a href="#">Sub item 2.1</a></li>
<li><a href="#">Sub item 2.2</a></li>
<li><a href="#">Sub item 2.3</a></li>
<li><a href="#">Sub item 2.4</a></li>
<li><a href="#">Sub item 2.5</a></li>
</ul>
</li>
<li><a href="#">Menu 3</a>
<ul>
<li><a href="#">Sub item 2.1</a></li>
<li><a href="#">Sub item 2.2</a></li>
<li><a href="#">Sub item 2.3</a></li>
<li><a href="#">Sub item 2.4</a></li>
<li><a href="#">Sub item 2.5</a></li>
</ul>
</li>
</ul>
</div>
<div class="body">Body</div>
<div class="footer">Footer</div>
</body>
</html>
met de volgende css
body {
font-size:100%;
font-family:Helvetica,Arial,sans-serif;
}
.head {
height: 90px;
width: 1024px;
background-color: #046380;
margin-left: 200px;
margin-right: 200px;
margin-top: -10px;
position:absolute;
}
.title {
font-size: 30px;
font-weight: 800;
color: #ffffff;
width: 160px;
margin-top: .7em;
margin-left: 1em;
position: relative;
}
.dropdowndiv {
width: 1024px;
height: 20px;
margin-top: 70px;
margin-left: 200px;
background-color: #efecca;
position: absolute;
}
.body {
width: 1024px;
height: 750px;
margin-top: 90px;
margin-left: 200px;
background-color: #efecca;
position: absolute;
}
.footer {
width: 1024px;
height: 70px;
margin-top: 90%;
margin-bottom: 5%;
margin-left: 200px;
position: absolute;
border-top: 2px solid #046380;
}
#dropdownmenu, #dropdownmenu ul {
padding: 0;
margin: 0;
list-style: none;
}
#dropdownmenu li {
float: left;
width: 120px;
}
#dropdownmenu ul {
position: absolute;
width: 120px;
left: -1000px;
}
#dropdownmenu li:hover ul {
left: auto;
}
Probleem hier is het volgende, het dropdown menu klapt zichzelf uit onder de body div. Ik zie de list options dus helemaal niet. Als ik de body div even er uit haal zie ik het gehele menu incl.. dropdown. Hoe zorg ik dat de dropdown div bovenop de body div komt te liggen. Heb een hoop lopen googlen maar ik zie het probleem maar niet. Heb een aantal float opties geprobeerd en overflow's maar ik heb echt geen idee of ik hier mee in de buurt zit. Anyone ? Thanks!
