Navigation Untermenü will nicht nach rechts

  • 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

  • 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:


  • 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.