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

[Domin1234]

Wpisałem dokładnie Twój przykład. Wiem, że dla Ciebie wydaję się to oczywiste ale prosze o wyrozumiałość (IMG:style_emoticons/default/smile.gif)