Problem z animowanym menu w javascript Opcje

[Domin1234]

Witam, moje animowane menu jest w javascripcie. Składa się z pięciu kategorii. Problem polega na tym, że jeżeli
dodam sobie jeszcze jedną lub więcej albo usunę jedą to po kliknięci kategorii robi się czary prostokąt.
Przed dodaniem po kliknięciu pozostaje podświetlony na biało. Poniżej wycinek z indexu:

[HTML] pobierz, plaintext 
<header>
  <h1><a href="index.html" id="logo">Thom Sander Photographer’s Portfolio</a></h1>
  <nav>
    <ul id="menu">
      <li><a href="#!/page_Home"><span></span><strong>Home Page</strong></a></li>
      <li><a href="#!/page_About"><span></span><strong>About</strong></a></li>
      <li><a href="#!/page_Portfolio"><span></span><strong>Portfolio</strong></a></li>
      <li><a href="#!/page_Services"><span></span><strong>My Services</strong></a></li>
      <li><a href="#!/page_Contact"><span></span><strong>Contact</strong></a></li>
    </ul>
  </nav>
</header>
[HTML] pobierz, plaintext 

oraz z css:

[CSS] pobierz, plaintext 
header {width:360px;float:left}
#logo {display:block;text-indent:-9999px;background:url(../images/logo.png) 0 0 no-repeat;width:280px;height:153px}
#menu {padding-top:122px}
#menu > li {width:100%;overflow:hidden;padding-bottom:4px}
#menu > li > a {display:inline-block;font-size:26px;line-height:54px;height:56px;color:#fff;background:#000;text-decoration:none;position:relative;letter-spacing:0px;cursor:pointer}
#menu > li > a span {display:block;background:#fff;position:absolute;width:100%;height:100%;top:0;left:0}
#menu > li > a strong {position:relative;display:block;padding:0 95px 0 40px;height:56px}
#menu > li > a:hover, #menu > li > a.active {color:#000}
#menu > li > a:hover strong, #menu > li > a.active strong{}
[CSS] pobierz, plaintext 

menu wygląda tak:
http://sendfile.pl/203816/1.jpg
Proszę o pomoc!

Powód edycji: [Kshyhoo]: bb-code

[Kshyhoo]

U mnie działa, dodałem nową pozycję NEW. http://jsfiddle.net/cE3vV/

[Domin1234]

Po najechaniu kursorem jest ok ale jak się kliknie to napis znika i zostaje czarny prostokąt.
Prawidłowo powinno być tak:
- po najechaniu podświetla się czarny napis na biało i po kliknięciu tak zostaje.

[Kshyhoo]

No to odwróć kolory, czarny napis na czarnym tle ma być widoczny?

[Domin1234]

Przed najechaniem wygląda tak:

http://sendfile.pl/203816/1.jpg

Po najechaniu tak:

http://sendfile.pl/203861/2.jpg


Natomiast jeżeli dodam kolejną kategorię do menu to po kliknięciu jest czarny prostokąt.
Tylko na tej dodanej pozycji. Pozostałe sa ok. Może to jakaś funkcja? Kolejność ma tu znaczenie?
Przerabiam darmowy szablon i miałem kilka problemów ale jak na razie daje radę

[Kshyhoo]

A masz jakiś kod JS do tego? Pokaż dok, jak dodajesz.

[Domin1234]

Dodaje tak samo. Poniżej skrypt:

[JAVASCRIPT] pobierz, plaintext 
$(document).ready(function() {
 
	$('.close span, .button1 span, .tabs .nav li a span, .lightbox-image span ').css({opacity:'0'})
	$('.tabs .nav .selected a span').css({opacity:'1'})
 
	$('.close, .button1').hover(function(){
		$(this).find('span').stop().animate({opacity:'1'})							
	}, function(){
		$(this).find('span').stop().animate({opacity:'0'})							
	})
 
	$('.lightbox-image').hover(function(){
		$(this).find('span').stop().animate({opacity:'0.4'})							
	}, function(){
		$(this).find('span').stop().animate({opacity:'0'})							
	})
 
	$('.tabs .nav li a').hover(function(){
		$(this).find('span').stop().animate({opacity:'1'})							
	}, function(){
		if (!$(this).parent().hasClass('selected')) {
			$(this).find('span').stop().animate({opacity:'0'})							
		}
	})
 
	//tabs
	tabs.init();
 
	// prettyPhoto
		$("a[data-type^='prettyPhoto']").prettyPhoto({theme:'light_square'});
 
	//bg animate
	$('#bgSlider').bgSlider({
		duration:1200,
		pagination:'.pagination',
		preload:true,
		spinner:'.bg_spinner'
	})
 
 });
[JAVASCRIPT] pobierz, plaintext 

Powód edycji: [Kshyhoo]: bb-code

[Kshyhoo]

Umieść kod w odpowiednich znacznikach.
Ja nie widzę związku JS z problemem.

[Domin1234]

Może w css? Zerknij proszę:

[CSS] pobierz, plaintext 
/* ============================= header ====================== */
header {width:360px;float:left}
#logo {display:block;text-indent:-9999px;background:url(../images/logo.png) 0 0 no-repeat;width:280px;height:153px}
#menu {padding-top:122px}
#menu > li {width:100%;overflow:hidden;padding-bottom:4px}
#menu > li > a {display:inline-block;font-size:26px;line-height:54px;height:56px;color:#fff;background:#000;text-decoration:none;position:relative;letter-spacing:0px;cursor:pointer}
#menu > li > a span {display:block;background:#fff;position:absolute;width:100%;height:100%;top:0;left:0}
#menu > li > a strong {position:relative;display:block;padding:0 95px 0 40px;height:56px}
#menu > li > a:hover, #menu > li > a.active {color:#000}
#menu > li > a:hover strong, #menu > li > a.active strong{}
/* ============================= content ====================== */
 
#content {height:868px;width:740px;float:left;position:relative}
#content > ul > li {position:relative;height:868px;width:100%;bottom:0}
.box1 {background:url(../images/bg_content.png) repeat;width:100%;height:100%;position:absolute;top:0;left:0}
.inner {padding:25px 55px 25px 60px;position:relative}
.close {position:absolute;top:20px;right:20px;width:25px;height:25px;background:url(../images/close.gif) 0 0 no-repeat;display:block}
.close span {display:block;background:url(../images/close.gif) 0 bottom no-repeat;width:100%;height:100%}
.pad_left1 {padding-left:60px}
.pad_bot1 {padding-bottom:25px}
.pad_bot2 {padding-bottom:4px}
.pad_bot3 {padding-bottom:10px}
.marg_right1 {margin-right:29px}
#page_Services .pad_bot3 {padding-bottom:15px}
#content figure {padding-top:5px}
.button1 {display:inline-block;font-size:16px;color:#000;text-transform:uppercase;text-decoration:none;background:#fff;line-height:33px;position:relative}
.button1 span {position:absolute;top:0;left:0;width:100%;height:100%;background:#000}
.button1 strong {position:relative;font-weight:400;display:block;padding:0 14px;letter-spacing:-1px}
.button1:hover {color:#fff}
.date {float:left;width:52px;margin-right:17px;text-align:center;font-size:49px;font-weight:700;color:#fff;letter-spacing:-1px;line-height:1.2em}
.date strong {margin-top:-9px;display:block}
.date span {font-weight:400;font-size:25px;line-height:1.2em;margin-top:-13px;display:block}
.color1 {color:#fff}
.list1, .list2 {margin-top:-2px}
.list1 li, .list2 li {line-height:24px}
.list1 a, .list2 a {padding-left:10px;background:url(../images/marker_1.gif) 0 6px no-repeat;text-decoration:none}
.list1 a:hover {color:#fff}
.list2 a {color:#fff}
.list2 a:hover {color:#808080}
.tabs .nav {padding-top:5px}
.tabs .nav li {line-height:28px;padding-bottom:2px}
.tabs .nav li a {position:relative;font-size:16px;letter-spacing:-1px;text-transform:uppercase;text-decoration:none;height:28px;line-height:26px;padding:0 39px 0 9px;color:#fff;background:#000;display:inline-block}
.tabs .nav li a span {display:block;position:absolute;top:0;left:0;width:100%;height:100%;background:#fff}
.tabs .nav li a strong {font-weight:400}
.tabs .nav li a:hover, .tabs .nav .selected a {color:#000}
.tab-content figure {padding-bottom:15px}
.tab-content figure.marg_right1 {margin-right:20px}
/* Lightbox image */
.lightbox-image {position:relative;overflow:hidden;display:block;background:#fff;z-index:1}
.lightbox-image img {position:relative;z-index:1}
.lightbox-image > span {display:block;position:absolute;left:0;top:0;width:100%;height:100%;background:url(../images/border.gif) 0 0 no-repeat;z-index:2}
.pp_details {height:0;padding:0;margin:0;font-size:0;line-height:0;visibility:visible !important}
.pp_description {display:none;height:0;padding:0;margin:0;font-size:0;line-height:0}
.pp_close {position:absolute;z-index:99;top:-30px;right:0;display:none !important}
div.light_square .pp_next {position:absolute;top:48%;right:-68px;width:35px;height:35px;background:url(../images/marker_right.gif) left top no-repeat;visibility:visible !important}
div.light_square .pp_next:hover {background-position:bottom}
div.light_square .pp_previous {position:absolute;top:48%;left:-68px;width:35px;height:35px;background:url(../images/marker_left.gif) left top no-repeat;visibility:visible !important}
div.light_square .pp_previous:hover {background-position:bottom}
.pp_arrow_previous, .pp_arrow_next {display:none !important}
.link1 {color:#fff;text-decoration:none}
.link1:hover {text-decoration:underline}
[CSS] pobierz, plaintext 

Powód edycji: [Kshyhoo]: bb-code

[Kshyhoo]

Popraw bb-code, inaczej zamknę wątek.

Istnieje opcja EDYTUJ, nie trzeba od razu nowy post. I są odpowiednie znaczniki do kolorowania składni.
Co do problemu. Powtarzam po raz ostatni: brakuje w kodzie CSS opcji po odwiedzeniu odnośnika, czyli np:

[CSS] pobierz, plaintext 
#menu > li > a:visited { }
[CSS] pobierz, plaintext 

[Domin1234]

Ok. Wpisałem. Nie pomogło. Tak to wygląda. Ostatnia kategoria.

http://sendfile.pl/203913/3.jpg

[Kshyhoo]

Pokaż kod!

[Domin1234]

Kod jest powyżej (css). Wpisałem to co mi przysłałeś w sekcję header

[Kshyhoo]

Napiszę jeszcze raz, pokaż kod, który wpisałeś.

[Domin1234]

Wpisałem dokładnie Twój przykład. Wiem, że dla Ciebie wydaję się to oczywiste ale prosze o wyrozumiałość

[Kshyhoo]

No to wpisałeś pustą deklarację, gratuluję pomysłu...
Musisz nadać mu tło i kolor czcionki.

[Domin1234]

Kod

    #menu > li > a:visited {color:#fff;background:#000}

Teraz będzie ok?

Również nic to nie dało

Ma ktoś jakiś pomysł?