[HTML|CSS] Dropdown soll sich über Inhalt schieben

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

  • [HTML|CSS] Dropdown soll sich über Inhalt schieben

    Hi
    Ich habe auf meiner Page ein Dropdownmenü erstellt, welches die Administrationspunkte beinhaltet.
    Nun soll sich das Menü, wenn ein Benutzer es öffnet, über den aktuellen Inhalt schieben.

    Ich habe es bereits mit z-index:1; und position:absolute; versucht, mit dem Ergebnis, dass er mir nur das letzte Element anzeigt, weil alle über dem ersten angezeigt werden.

    Hier die Entsprechenden Codes

    Quellcode

    1. <ul id="adminnavi">
    2. <li><a href="?show=admin"><div class="adminnavi_top">&nabla; Hauptmen&uuml;</div></a>
    3. <ul>
    4. <li>
    5. <a href="?show=admin&mode=home">
    6. <div class="adminnavi_ele">Startseite</div>
    7. </a>
    8. </li>
    9. <li>
    10. <a href="?show=admin&mode=current">
    11. <div class="adminnavi_ele">Aktuelles</div>
    12. </a>
    13. </li>
    14. <li>
    15. <a href="?show=admin&mode=management">
    16. <div class="adminnavi_ele">Vorstand</div>
    17. </a>
    18. </li>
    19. <li>
    20. <a href="?show=admin&mode=history">
    21. <div class="adminnavi_ele">Chronik</div>
    22. </a>
    23. </li>
    24. </ul>
    25. </li>
    26. <li>
    27. <a href="?show=admin&mode=home">
    28. <div class="adminnavi_top" style="text-align:center;">Untermen&uuml;</div>
    29. </a>
    30. </li>
    31. <li>
    32. <a href="?show=admin&mode=logout">
    33. <div class="adminnavi_top" style="text-align:center;">Logout</div>
    34. </a>
    35. </li>
    36. </ul>
    Alles anzeigen


    Quellcode

    1. * html > body {
    2. behavior:url("htc/csshover.htc");
    3. }
    4. *>htm body {
    5. behavior:url("htc/csshover.htc");
    6. }
    7. * html body {
    8. behavior:url("htc/csshover.htc");
    9. }
    10. *+html body {
    11. behavior:url("htc/csshover.htc");
    12. }
    13. .adminnavi_top {
    14. width:174px;
    15. border: 1px #000000 solid;
    16. padding: 3px;
    17. margin: 2px;
    18. margin-bottom: 0px;
    19. background-color: #D9D9D9;
    20. }
    21. .adminnavi_ele {
    22. width:174px;
    23. border: 1px #000000 solid;
    24. border-top: 0px;
    25. padding: 3px;
    26. margin-left: 2px;
    27. margin-right: 2px;
    28. background-color: #EBEBEB;
    29. z-index:1;
    30. position:relative;
    31. }
    32. #adminnavi, #adminnavi ul {
    33. list-style-type:none;
    34. margin:0;
    35. padding:0;
    36. }
    37. #adminnavi li {
    38. width:190px;
    39. float:left;
    40. }
    41. #adminnavi li ul {
    42. display:none;
    43. }
    44. #adminnavi li:hover ul {
    45. display:block;
    46. }
    Alles anzeigen


    Ich hoffe, dass ihr mir helfen könnt.

    Vielen Dank für die Mühe
    Lu