Navigations Menü problem

Diese Seite verwendet Cookies. Durch die Nutzung unserer Seite erklären Sie sich damit einverstanden, dass wir Cookies setzen. Weitere Informationen

  • Navigations Menü problem

    Hallo,
    ich habe ein Navigations Menü

    HTML-Quellcode

    1. div id="mainMenu" class="mainMenu">
    2. <div class="mainMenuInner">
    3. <ul>
    4. <li id="mainMenuItem1" class="firstActive">
    5. <a href="localhost/index/" title="1. Startseite">
    6. <span> 1. Startseite</span>
    7. </a>
    8. </li>
    9. <li id="mainMenuItem2">
    10. <a href="localhost/index/" title="2. Testseite">
    11. <span>2. Testseite</span>
    12. </a>
    13. </li>
    14. </ul>
    15. </div>
    Alles anzeigen


    Wenn ich das Menü so verwende mit dem CSS

    CSS-Quellcode

    1. .mainMenu .mainMenuInner, .mainMenu a, {
    2. border-color: transparent!important;
    3. border-width: 0px;
    4. border-style: solid;
    5. margin: 0;
    6. }
    8. .mainMenu div {
    9. text-align: left;
    10. }
    12. .mainMenu ul {
    13. list-style: none;
    14. margin: 0 0 -1px 0;
    15. padding: 0;
    16. }
    18. .mainMenu div {
    19. text-align: left;
    20. }
    22. .mainMenu > div > ul > li {
    23. margin-bottom: -2px;
    24. display: inline-block;
    25. }
    27. .mainMenu a {
    28. -moz-transition: all 0.2s linear 0s;
    29. float: left;
    30. font-family: 'Jockey One', sans-serif;
    31. font-size: 1.3em;
    32. margin-right: 0;
    33. padding: 3px 10px 3px;
    34. text-align: left;
    35. text-transform: uppercase;
    36. width: 180px;
    37. border-bottom: 1px solid rgba(0, 0, 0,0.5) !important;
    38. border-left: 0px;
    39. border-right: 0px;
    40. border-top: 0px;
    41. -moz-transition: all 0.3s linear;
    42. -webkit-transition: all .3s linear;
    43. -o-transition: all 0.3s linear;
    44. transition: all 0.3s linear;
    45. }
    47. .mainMenu a {
    48. border-width: 1px;
    49. border-style: solid;
    50. margin: 0 -1px 0 0;
    51. display: block;
    52. min-height: 23px;
    53. white-space: nowrap !important;
    54. }
    56. .mainMenu a {
    57. border-width: 1px;
    58. border-style: solid;
    59. margin: 0 -1px 0 0;
    60. display: block;
    61. min-height: 23px;
    62. white-space: nowrap !important;
    63. }
    65. .mainMenu a {
    66. background: url("../css/source/buttons/mainMenu.png") repeat-x left top;
    67. float: left;
    68. font-family: 'Jockey One', sans-serif;
    69. font-size: 1.3em;
    70. margin-right: 0;
    71. padding: 3px 10px 3px;
    72. text-align: left;
    73. text-transform: uppercase;
    74. width: 180px;
    75. border-bottom: 1px solid rgba(0, 0, 0,0.5) !important;
    76. border-left: 0px;
    77. border-right: 0px;
    78. border-top: 0px;
    79. -moz-transition: all 0.3s linear;
    80. -webkit-transition: all .3s linear;
    81. -o-transition: all 0.3s linear;
    82. transition: all 0.3s linear;
    83. }
    85. .mainMenu li.firstActive a, .mainMenu li.lastActive a, .mainMenu .active a {
    86. margin-left: 0px;
    87. box-shadow: 0 1px 0 rgba(255, 255, 255, 0.15) inset;
    88. }
    90. .mainMenu li.firstActive a, .mainMenu li.lastActive a, .mainMenu .active a, .mainMenu a, .mainMenu a:hover {
    91. -webkit-border-radius: 3px;
    92. -moz-border-radius: 3px;
    93. border-radius: 3px;
    94. }
    96. .mainMenu li.firstActive a, .mainMenu li.lastActive a, .mainMenu .active a, .containerHead, .messageNumber:hover, .smallButtons > ul > li.selected > a:hover, .smallButtons > ul > li.selected > a, .pageNavigation li.active span, .pageNavigation li a:hover {
    97. background: -moz-linear-gradient(top, rgba(57,112,192,1) 0%, rgba(50,97,158,1) 100%);
    98. background: -webkit-linear-gradient(top, rgba(57,112,192,1) 0%, rgba(50,97,158,1) 100%);
    99. background: -o-linear-gradient(top, rgba(57,112,192,1) 0%, rgba(50,97,158,1) 100%);
    100. background: -ms-linear-gradient(top, rgba(57,112,192,1) 0%, rgba(50,97,158,1) 100%);
    101. }
    103. .mainMenu .active a, .mainMenu .firstActive a, .mainMenu .lastActive a {
    104. text-shadow: 0 1px 5px rgba(0, 0, 0, 0.5);
    105. }
    Alles anzeigen


    Aber die Links werden noch als Link angezeigt und nicht einfach z.B. in weiß

    Dieser Beitrag wurde bereits 1 mal editiert, zuletzt von DestinatioN ()