Menu with tabs with jQuery

Menu with tabs with jQuery

Hi,

I want to navigate the tabs:


But when I click on "Description" or "Content" it goes like this and does not come back:


How do I get this?

Part of the code in php:
  2. <script type="text/javascript" src="js/jquery-1.6.4.min.js"></script>
  3. <script type="text/javascript" src="js/abas.js"></script>

Another part of the code in php:
  2. <section id="abas-geral">
  3. <ul class="menu">
  4. <li><a href="aba01">Description</a></li>
  5. <li><a href="aba02">Content</a></li>
  6. </ul>
  7. <section id="box">
  8. <div id="aba01" class="conteudo">
  9. <article id="descricao">
  10. <h5>Description</h5>
  11. <p>
  13. Test Content
  14. </p>
  15. </article>
  16. </div>
  17. </section>

Css file code:
  2. #abas-geral{
  3. width: 680px;
  4. margin: 10px auto;
  6. }

  8. ul.menu{
  9. margin:0;
  10. padding:0;
  11. float: left;
  12. list-style:none;
  13. height: 32px;
  14. border-bottom:1px solid #999;
  15. width: 100%;
  16. }
  17. ul.menu li {
  18. float: left;
  19. margin:0;
  20. padding:0;
  21. height:31px;
  22. line-height:31px;
  23. border: 1px solid#999;
  24. border-left:none;
  25. margin-bottom:-1px;
  26. background: e0e0e0;
  27. overflow:hidden;
  28. position:relative;
  29. }
  30. ul.menu li a {
  31. text-decoration:none;
  32. color: #000;
  33. display:block;
  34. font-size:1.2em;
  35. padding:0 20px;
  36. border: 1px solid #FFF;
  37. outline: none;
  39. }
  40. ul.menu li a:hover {
  41. background: #66ccff;

  43. }
  44. ul.menu li.active, ul.menu li.active a:hover{
  45. background: #FFF;
  46. border-bottom:1px solid #FFF;
  47. }

  49. #box{
  50. text-align: left;
  51. border: 1px solid #999;
  52. border-top: 5px;
  53. clear: both;
  54. float: left;
  55. width: 669px;
  56. background: #fff;
  57. padding-left: 4px;
  58. padding-right: 7px;
  59. }
JQuey file I'm using:

Tab file that I am using: