hey allen,
ik zou graag een drop down menu maken, maar iets klopt er niet..
vergelijk origineel.html met test.html
origineel.html:
test.html:
het .css bestand ziet er als volgt uit:
portfolio verspringt naar de volgende regel wanneer ik de code van het dropdown menu toepas. Hoe kan ik dit vermijden? Is er ook een manier om de submenu's niet naar beneden uit te laten vouwen maar naar boven (want op de originele site zou dit menu helemaal onderaan de pagina moeten staan)?
Alvast bedankt,
the goose
ik zou graag een drop down menu maken, maar iets klopt er niet..
vergelijk origineel.html met test.html
origineel.html:
HTML:
<html>
<head>
<title>origineel
</title>
<link rel="stylesheet" href="css/Kopie van navigatie.css" type="text/css">
<meta http-equiv="Content-Type" content="text/html; charset=iso-8859-1">
</head>
<body bgcolor="#2f3336">
<center>
<font face="Verdana" color="white" size="2">
<center>
<font face="Verdana" color="white" size="2">
<strong><small><a href="werkzaamheden.html" target="main">
Werkzaamheden als geregistreerd aannemer
</a></small></strong>
|
<strong><small><a href="portfolio.html" target="main">
Portfolio
</a></small></strong>
</font>
</center>
</body>
</html>test.html:
HTML:
<html>
<head>
<title>test
</title>
<script language="JavaScript">
sfHover = function() {
var sfEls = document.getElementById("nav").getElementsByTagName("LI");
for (var i=0; i<sfEls.length; i++) {
sfEls[i].onmouseover=function() {
this.className+=" ie_does_hover";
}
sfEls[i].onmouseout=function() {
this.className=this.className.replace(new RegExp(" ie_does_hover\\b"), "");
}
}
}
if (window.attachEvent) window.attachEvent("onload", sfHover);
</script>
<link rel="stylesheet" href="css/Kopie van navigatie.css" type="text/css">
<meta http-equiv="Content-Type" content="text/html; charset=iso-8859-1">
<style type="text/css">
body {margin: 0px; padding: 0px;}
</style>
</head>
<body bgcolor="#2f3336">
<center>
<font face="Verdana" color="white" size="2">
<strong><small><a href="werkzaamheden.html" target="main">
Werkzaamheden als geregistreerd aannemer
</a></small></strong>
|
<strong><small>
<ul id="nav">
<li><a href="#">Portfolio</a>
<ul>
<li><a href="badkamer.html" target="main">Badkamer</a></li>
<li><a href="...html" target="main">Sub item 1.2</a></li>
<li><a href="...html" target="main">Sub item 1.3</a></li>
<li><a href="...html" target="main">Sub item 1.4</a></li>
<li><a href="...html" target="main">Sub item 1.5</a></li>
<li><a href="...html" target="main">Sub item 1.6</a></li>
<li><a href="...html" target="main">Sub item 1.7</a></li>
<li><a href="...html" target="main">Sub item 1.8</a></li>
<li><a href="...html" target="main">Sub item 1.9</a></li>
</ul>
</li>
</ul>
</small></strong>
</font>
</center>
</body>
</html>het .css bestand ziet er als volgt uit:
HTML:
.title { padding-right: 0px; padding-left: 20px; font-weight: bold; text-transform: capitalize; color: #999999}
body { font-family: Verdana, Times New Roman, Arial, Helvetica;
font-size: 11px;
text-align: left;
table { font-size: 11px}
.head { font-size: 11px; text-align: left; font-weight: bold}
.content { padding-right: 4px; padding-left: 10px; color: #999999}
A:link {
COLOR: gray; TEXT-DECORATION: none
}
A:visited {
COLOR: gray; TEXT-DECORATION: none
}
A:active {
COLOR: gray
}
A:hover {
COLOR: white; TEXT-DECORATION: none
}
.img_portfolio
{
border-color: white;
border-width: 1px;
border-style: solid;
}
#nav, #nav ul {
padding: 0;
margin: 0;
list-style: none;
}
#nav li {
float: left;
width: 120px;
}
#nav ul {
position: absolute;
width: 120px;
left: -1000px;
}
#nav li:hover ul, #nav li.ie_does_hover ul {
left: auto;
background-position: 0 0;
}
#nav a {
display: block;
}portfolio verspringt naar de volgende regel wanneer ik de code van het dropdown menu toepas. Hoe kan ik dit vermijden? Is er ook een manier om de submenu's niet naar beneden uit te laten vouwen maar naar boven (want op de originele site zou dit menu helemaal onderaan de pagina moeten staan)?
Alvast bedankt,
the goose
Laatst bewerkt:
