Menu Active met CSS werkt niet
CSS code:
.menu2{margin:207px 0 0 0px; padding:0; height:30px; width:900px; display:block; background:url("../images/topMenuImages.png") repeat-x;}
.menu2 li{padding:0; margin:0; list-style:none; display:inline;}
.menu2 li a{float:left; padding-left:15px; display:block; color:rgb(0,0,0); text-decoration:none; font:12px Verdana, Arial, Helvetica, sans-serif; cursor:pointer; background:url("../images/topMenuImages.png") 0px -30px no-repeat; outline:none;}
.menu2 li a span{line-height:30px; float:left; display:block; padding-right:15px; background:url("../images/topMenuImages.png") 100% -30px no-repeat;}
.menu2 li a:hover{background-position:0px -60px; color:rgb(255,255,255);}
.menu2 li a:hover span{background-position:100% -60px;}
.menu2 li a.active, .menu2 li a.active:hover{line-height:30px; font:12px Verdana, Arial, Helvetica, sans-serif; background:url("../images/topMenuImages.png") 0px -90px no-repeat; color:rgb(0,0,0);}
.menu2 li a.active span, .menu2 li a.active:hover span{background:url("../images/topMenuImages.png") 100% -90px no-repeat;}
HTML code:
<ul class="menu2">
<li><a href="http://www.x.nl/?page=home" class="active"><span>HOME</span></a></li>
<li><a href="http://www.x.nl/?page=menuitem1"><span>menuitem1</span></a></li>
<li><a href="http://www.xs.nl/?page=menuitem2"><span>menuitem2</span></a></li>
<li><a href="http://www.x.nl/?page=menuitem3"><span>menuitem3</span></a></li>
<li><a href="http://www.x.nl/?page=menuitem4"><span>menuitem4</span></a></li>
<li><a href="http://www.x.nl/?page=menuitem5"><span>menuitem5</span></a></li>
</ul>
Zo op het eerste gezicht klopt het wel allemaal. Maar zoals gezegd. De home blijft active ook als ik op de andere linkjes klik. Hover en dergelijke doen het wel. Wie heeft het antwoord?
Gewijzigd op 24/01/2011 19:19:04 door Dashti webdeveloper