kheb eens iets in elkaar gestoken:
HTML-code:
<html>
<head>
<style type="text/css">
p {font-family:arial; font-size:12px}
A:link, A:visited {color:orange}
A:hover {color:white}
#navigatie {margin: 0px; padding: 0px; height: 22px; z-index: 50}
#navigatie li {width: 200px; height: 22px; position: absolute; display: block; z-index: 50; list-style: none}
#navigatie a {width: 200px; height: 22px; display: block; z-index: 50; color:black}
#navigatie a:hover {width: 200px; height: 22px; display: block; z-index: 50; color:red; background-color:blue; border:0px}
#n1 {left:0}
#n2 {left:200px}
#n3 {left:400px}
#n4 {left:600px}
#n5 {left:800px}
#n1,#n2,#n3,#n4,#n5{}
#n1 a {}
#n2 a {background-position: -200px 0}
#n3 a {background-position: -400px 0}
#n4 a {background-position: -600px 0}
#n5 a {background-position: -800px 0}
#n1 a,#n2 a,#n3 a,#n4 a,#n5 a{background-color:green; padding:3 0 3 15}
#n1 a:hover {background-position: 0 -22px}
#n2 a:hover {background-position: -200px -22px}
#n3 a:hover {background-position: -400px -22px}
#n4 a:hover {background-position: -600px -22px}
#n5 a:hover {background-position: -800px -22px}
#n1 a:hover,#n2 a:hover,#n3 a:hover,#n4 a:hover,#n5 a:hover{background-color:yellow}
#navigatie li ul {visibility: hidden; position: absolute; left: -1px; margin: 0 0 0 5px; padding: 0px; width:200px; border:0px}
#navigatie #n1 ul,#navigatie #n2 ul,#navigatie #n3 ul,#navigatie #n4 ul,#navigatie #n5 ul {background-color:white}
#navigatie li ul li, #navigatie li ul li a {width:200px; position: relative; z-index: 56}
#navigatie li ul li a {padding:3 0 3 15; border:0px}
#navigatie li:hover>ul {visibility: visible}
</style>
<script language="javascript" type="text/javascript">
function cssJsMenu(elemId) {
if (document.getElementById(elemId)) {
var navroot = document.getElementById(elemId);
var lis=navroot.getElementsByTagName("LI");
for (i=0; i<lis.length; i++) {
for (j=0; j<lis[i].getElementsByTagName("UL").length; j++) {
lis[i].onmouseover = function() {
this.getElementsByTagName("UL")[j].style.visibility = 'visible';}
lis[i].onmouseout = function() {
this.getElementsByTagName("UL")[j].style.visibility = 'hidden';}}}}}
</script>
</head>
<body leftmargin="0px" topmargin="10px" style="background-color:#F0F0F0">
<ul id="navigatie">
<li id="n1">
<a href="#">Home</a>
<ul>
<li><a href="#">1.1</a></li>
<li><a href="#">1.2</a></li>
<li><a href="#">1.3</a></li>
<li><a href="#">1.4</a></li>
<li><a href="#">1.5</a></li>
</ul>
</li>
<li id="n2">
<a href="#">Menu 2</a>
<ul>
<li><a href="#">2.1</a></li>
<li><a href="#">2.2</a></li>
<li><a href="#">2.3</a></li>
<li><a href="#">2.4</a></li>
<li><a href="#">2.5</a></li>
</ul>
</li>
<li id="n3">
<a href="#">Menu 3</a>
<ul>
<li><a href="#">3.1</a></li>
<li><a href="#">3.2</a></li>
<li><a href="#">3.3</a></li>
<li><a href="#">3.4</a></li>
<li><a href="#">3.5</a></li>
</ul>
</li>
<li id="n4">
<a href="#">Menu 4</a>
<ul>
<li><a href="#">4.1</a></li>
<li><a href="#">4.2</a></li>
<li><a href="#">4.3</a></li>
<li><a href="#">4.4</a></li>
<li><a href="#">4.5</a></li>
</ul>
</li>
<li id="n5">
<a href="#">Menu 5</a>
<ul>
<li><a href="#">5.1</a></li>
<li><a href="#">5.2</a></li>
<li><a href="#">5.3</a></li>
<li><a href="#">5.4</a></li>
<li><a href="#">5.5</a></li>
</ul>
</li>
</ul>
<script language="javascript" type="text/javascript">cssJsMenu('navigatie');</script>
</body></html>
Er komt dus wel javascript voor
Favorieten/bladwijzers