Navigation Untermenü will nicht nach rechts

Schon festgestellt? Dem Forum sind gerade alle Interaktionsmöglichkeiten genommen. :(

Mehr dazu unter: Abstimmung über das Forum

  • Hallo Leute,


    ich schaffe es einfach nicht meine Untermenü-Punkte (.drpdwn-content) nach rechts zu bringen. Habe es sowohl mit text-align als auch float versucht jedoch bewegen sich die Unterpunkte keinen Millimeter.

    Was mache ich falsch oder habe ich das Untermenü falsch aufgebaut?


    meine html-datei

    Und meine css Datei

  • Du stellst mit #menu li { float:left; } das floating für alle <li> unterhalb von #menu.

    Das musst Du natürlich für das Dropdown aufheben und dann nur noch Dein margin:-15vw; anpassen.


    Die Frage ist auch, ob Du mit flex nicht auch besser dran wärst...

  • oh mein Gott es war so einfach :) vielen dank ich habe so lange rum probiert.

    Fals noch jemand dieses Problem hat, ich habe es dann mit folgender Zeile gelöst:


    Code
    1. #menu li ul li{ float: right !important;}

    ja mit flex habe ich schon etwas gearbeitet nur steige ich da noch nicht durch bzw. bin ich so schneller zum Ziel gekommen werde es aber nach dem diese Seite fertig ist angreifen.

  • Hallo,

    ich habe glaube ich, dasselbe Problem. Meine Unterpunkte liegen seitlich versetzt unter dem Hauptmenü. Allerdings sollen diese genau unter dem jeweiligen Hauptmenü liegen.


    So sieht es in html aus:

    <ul class="submenu">

    <li><a href="mia.html">Unsere Mia</a></li>

    <li>

    <a href="">Allgemeines</a>

    <ul>

    <li><a href="labrador.html">Labrador</a></li>

    <li><a href="ridgeback.html">Ridgeback</a></li>

    </ul>

    </li>

    <li>

    <a href="">Sportarten</a>

    <ul>

    <li><a href="agility.html">Agility</a></li>

    <li><a href="dummytraining.html">Dummytraining</a></li>

    </ul>

    </li>

    <li><a href="impressum.html">Impressum und Kontakt</a></li>

    </ul>


    Und in CSS so:


    #navibereich {

    background-color: grey;

    padding: 5px 25px 5px 25px; /* Innenabstand */

    text-align: center;

    height: 68px;

    }


    #navibereich li {

    display: inline-block; /*nebeneinander anzeigen */

    list-style-type: disc;

    margin-left: 80px;

    margin-right: 80px;

    }


    a {

    margin: 0 3px;

    }


    #navibereich a:hover {

    background-color: grey;

    width: 100px;

    }


    li {

    float: left;

    }


    ul {

    list-style-type: disc;

    margin: 2;

    padding: 2;

    }


    ul li {

    float: left;

    position: relative;

    }


    li a {

    display: block;

    width: 100px;

    }


    ul li ul {

    display: none;

    position: absolute;

    }


    ul li:hover ul {

    display: block;

    background-color: #626262 ;

    color: black;

    }


    ul li:hover ul a {

    display: block;

    width: 30px;

    }


    ul li ul li a:hover {

    display: block;

    width: 100px;

    color: black;

    }


    .site-nav-list {

    background-color: #333;

    padding: 0.1em;


    }


    .site-nav-list li {

    display: inline;

    margin-right: 1em;

    }


    .site-nav-list a {

    padding: 1px 2px;

    color: grey;

    text-decoration: none;

    }


    Was mache ich falsch bzw. fehlt etwas?


    Danke für eure Hilfe und einen schönen Abend


    Nancy

  • Hallo Nancy und willkommen im Forum!

    Du machst nicht direkt etwas falsch, dass diese Listenpunkte nach rechts versetzt sind, liegt daran, dass für ul per default ein padding-left definiert ist. Setzt man dieses auf 0 rutschen sie nach links, allerdings hat dann die Tatsache, dass Du float verwendest, den unangenehmen Nebeneffekt, dass sie dann nebeneinander angeordnet werden. Dies kannst Du wiederum beheben, indem Du sie mit flex statt float anordnest. So funktioniert es bei mir:

    Dies ist kein Einzelfall, dass die Verwendung von float unerwünschte Nebenwirkungen hat, daher empfehle ich generell, dich mit Flexlayout vertraut zu machen:

    https://css-tricks.com/snippets/css/a-guide-to-flexbox/


    BTW: Beim Posten von Code besser Codetags verwenden, das </> in der Werkzeugleiste rechts oben.

  • Hallo und vielen Dank für die schnelle Antwort!


    Du hast mir sehr geholfen. Die Unterpunkte sind zwar nach links gerutscht, aber leider nicht so weit, dass sie jetzt richtig unter dem Hauptpunkt stehen.

    Kann ich das irgendwie einstellen, dass sie noch weiter nach links rutschen?


    Danke und einen schönen Tag :)

  • Kann es vielleicht noch an einer anderen Einstellung in meinem CSS liegen?


    Das ist der Code:


  • PS: Ich vergaß: Da ist noch ein Fehler im CSS:

    Code
    1. ul li ul {
    2. display: none;
    3. position: absolute;
    4. padding-left: 10;
    5. }

    Das Padding braucht eine Einheit, wenn es ungleich 0 ist, in diesem Fall muss es jedoch gleich 0 sein, dann kann man sie weg lassen.

  • Das margin war dafür da, dass die Leiste nach oben gerutscht ist. Wenn ich das lösche, dann rutscht die Navigation nach unten.

    Leider wollen die Unterpunkte noch immer nicht so, wie ich es will :/

  • Du kannst das Margin auch auf die erste Stufe der Navigation beschränken:

    Code
    1. ul {
    2. display: flex;
    3. list-style-type: disc;
    4. }
    5. ul.submenu {
    6. margin: 2px;
    7. padding: 2px;
    8. }

    Außerdem hast Du da immer noch floats drin, lösche diese besser. Flex setzt sich zwar durch, aber die floats sind verwirrend.