active elements css and javascript problem

in navbar i need a bottom line for my active objects [login to view URL] there are several problem: 1. my javascript code works for a short time about 2 seconds then is set back <script> $(document).ready(function() { $('ul.main-navigation > li').click(function (e){ $('ul.main-navigation > li').removeClass('active'); $(this).addClass('active'); alert("keep this change!!!"); }); }); </script> 2. the active border bottom (= line) should be exactly where the mouseover line is when i mouseover the active item in the navbar i dont want to see any change 3. the sub elements also are getting a border bottom (white) you can see it on the first active object immobilien and compare it with service section - this is how it should be I NEED A FREELANCER WHO HELPS ME LEARNING so i need only description and fixes by text - tell me what i am doing wrong i cannot give any server access it should be possible without