<html>
<head>
<link rel="stylesheet" href="style.css" type="text/css">
</head>
<body background="navi.jpg" bgproperties="fixed">
<script language="JavaScript" type="text/javascript">
function navigation() {
// Selektiere alle li-Elemente welche direkte Nachfahren eines ul-Elements innerhalb eines Elements mit der id navigation sind
// wende darauf das Event "hover" an
$('#navigation ul>li').hover(
// Ast für onouseover
function() {
// füge die Klasse hover hinzu
$(this).addClass("hover");
},
// selbriges, nur für onouseout
function() {
$(this).removeClass("hover);
}
);
}
</script>
<a class="navi1" href="#" target="_blank"> Nummer I</a>
<a class="navi2" href="#" target="_blank"> Nummer II</a>
<ul>
<li id="navigation"><a class="navi1" href="#">NummerI</a></li>
<li id="navigation"><a class="navi2" href="#">Nummer II </ a> </ li>
</ul>
</body>
</html>
css datei:
Body{
background-repeat:no-repeat;
color:#FFFFFF;
font-family:Arial;
font-size: 14px;
}
a.navi1:link{color:#000000; font-size:14px; background-image:url(navi.png); z-index:1; position:absolute; top:100px; width:100px; text-decoration: none;}
a.navi2:link{color:#000000; font-size:14px; background-image:url(navi.png); z-index:2; position:absolute; top:100px; left:80; width:100px; text-decoration: none;}
a:visited {color:#000000; font-size:14px; text-decoration: none;}
a:active{color:#000000; font-size:14px; text-decoration: none;}
li:hover ul,
li.hover ul { z-index: 10; background-image:url(naviactiv.png); }
was hab ich den jetzt falsch gemacht