1. Jetzt anmelden. Es dauert nur 2 Minuten und ist kostenlos!
    Information ausblenden

[ERLEDIGT] Menü klappt sofort wieder zu

Dieses Thema im Forum "CSS" wurde erstellt von manuthedanu, 16 Dezember 2016.

  1. manuthedanu

    manuthedanu Neues Mitglied

    Registriert seit:
    16 Mai 2016
    Beiträge:
    16
    Punkte für Erfolge:
    1
    Hey Leute kann mir jemand von euch erklären wieso dass Dropdown Menü bei mir nicht funktioniert
    Es klappt zwar wie gewollt auf, jedoch wenn ich auf dass aufgeklappte gehen will klappt es sofort wieder zu obwohl ich dass richtig eingestellt habe.

    Code (CSS):
    1. #menu {
    2.     height: 100px;
    3.     width: 900px;
    4.     margin-left: 500px;
    5.     margin-top: 0;
    6.     position: relative;
    7. }
    8. #menu h3 {
    9.     font-size: 16px;
    10.     color: #fff;
    11.     padding: 10px;
    12.     margin: 0;
    13.     background: #000;
    14.     line-height: 20px;
    15. }
    16. #menu ul {
    17.     position: absolute;
    18.     margin: 0 auto;
    19.     list-style: none;
    20. }
    21. #menu ul li {
    22.     float: left;
    23.     margin: 0 0 0 0px;
    24.     font-size: 20px;
    25.     font-family: 'Bree Serif', serif;
    26.     line-height: 50px;
    27. }
    28. #menu ul li a {
    29.     color: #000;
    30.     text-decoration: none;  
    31.     -webkit-transition: all .5s ease-in-out;
    32.     -moz-transition: all .5s ease-in-out;
    33.     -o-transition: all .5s ease-in-out;
    34.     -ms-transition: all .5s ease-in-out;
    35.     transition: all .5s ease-in-out;
    36. }
    37. #menu ul li a:hover {
    38.     color: #999;
    39. }
    40. #menu ul li img {
    41.     float: left;
    42.     width: 16px;
    43.     height: 16px;
    44.     margin: 14px 5px;
    45.     padding: 6px;
    46.     background: #999;
    47.     -webkit-border-radius: 25px;
    48.     -moz-border-radius: 25px;
    49.     border-radius: 25px;
    50.     -webkit-transition: all .5s ease-in-out;
    51.     -moz-transition: all .5s ease-in-out;
    52.     -o-transition: all .5s ease-in-out;
    53.     -ms-transition: all .5s ease-in-out;
    54.     transition: all .5s ease-in-out;
    55. }
    56. #menu ul li:hover img {
    57.     background: #000;
    58. }
    59. #menu ul ul {
    60.     position: absolute;
    61.     top: -9999px;
    62.     background: #fff;
    63.     padding: 0;
    64.     margin: 0 0 0 -5px;
    65.     -webkit-box-shadow: 0 10px 20px #888;
    66.     -moz-box-shadow: 0 10px 20px #888;
    67.     box-shadow: 0 10px 20px #888;
    68. }
    69. #menu ul ul:before {
    70.     position: absolute;
    71.     content:"";
    72.     width: 10px;
    73.     height: 10px;
    74.     top: -5px;
    75.     left: 20px;
    76.     background: #000;
    77.     -webkit-transform: rotate(45deg);
    78.     -moz-transform: rotate(45deg);
    79.     -o-transform: rotate(45deg);
    80.     -ms-transform: rotate(45deg);
    81.     transform: rotate(45deg);
    82. }
    83. #menu ul li:hover ul {
    84.     top: 55px;
    85. }
    86. #menu ul ul li {
    87.     float: none;
    88.     font-size: 16px;
    89.     padding: 5px 10px;
    90.     text-align: left;
    91.     text-transform: uppercase;
    92.     margin: 0;
    93.     border-bottom: 1px solid #ddd;
    94.     line-height: 20px;
    95.     -webkit-transition: all .5s ease-in-out;
    96.     -moz-transition: all .5s ease-in-out;
    97.     -o-transition: all .5s ease-in-out;
    98.     -ms-transition: all .5s ease-in-out;
    99.     transition: all .5s ease-in-out;
    100. }
    101. #menu ul ul a {
    102.     color: #333;
    103.     text-decoration: none;
    104. }
    105. #menu ul ul li.all {
    106.     font-size: 12px;
    107.     border-bottom: none;
    108.     text-transform: none;
    109. }
    110. #menu ul ul li:hover {
    111.     background: #333;
    112.     color: #fff;
    113. }
     
    Zuletzt von einem Moderator bearbeitet: 16 Dezember 2016
    Werbung:

    Jetzt registrieren, damit diese Werbung verschwindet
  2. Spicelab

    Spicelab Mod | ZENmechanic Team Moderator

    Registriert seit:
    27 November 2015
    Beiträge:
    1.334
    Punkte für Erfolge:
    83
    Dein Konzept funktioniert derzeit, wenn sich der Mauszeiger im Bereich des ::before-Pseudoelements bewegt :D

    Links und rechts von ihm existiert zwischen Hauptmenüpunkt und Untermenü eine 5px-Lücke, die das Untermenü vorzeitig schliesst, wenn der Mauszeiger sich darin befindet.

    Lösung:
    Code (CSS):
    1. #menu ul li:hover ul {
    2. /*top:55px; auskommentiert */
    3. top: 50px;
    4. padding-top: 5px;
    5. }
    Fiddle-Demo: https://jsfiddle.net/SpiceLab/df98xo38/
     
  3. manuthedanu

    manuthedanu Neues Mitglied

    Registriert seit:
    16 Mai 2016
    Beiträge:
    16
    Punkte für Erfolge:
    1
    Vielen Dank für die schnelle Hilfe :)
     
  4. Spicelab

    Spicelab Mod | ZENmechanic Team Moderator

    Registriert seit:
    27 November 2015
    Beiträge:
    1.334
    Punkte für Erfolge:
    83
    Gern geschehen :) Warum auch warten lassen? :D