css nur horizontaler subnav

Ich Baue eine CSS-nur zwei-level horizontal navigation bar mit relativen sub-navigation zu den Eltern. Alle Menü-Elemente sind inline. Abhängig von den Klassen 'rechts' oder 'Links', die sub-nav, ausgerichtet auf die Eltern. Dies ist, was ich es geschafft haben, zu erreichen so weit:

html:

<body>
    <div class="navbar">
        <ul class="topnav left">
            <li>nav</li>
            <li>menu1
                <span class="subnav">
                    <ul class="subnav subnav-left">
                        <li>item1-1</li>
                        <li>item1-2</li>
                        <li>item1-3</li>
                    </ul>
                </span>
            </li>
            <li>menu2
                <span class="subnav">
                    <ul class="subnav subnav-left">
                        <li>item2-1</li>
                        <li>item2-2</li>
                        <li>item2-3</li>
                    </ul>
                </span>
            </li>
        </ul>
        <ul class="topnav right">
            <li class="right">menu3
                <span class="subnav subnav-right">
                    <ul class="subnav subnav-left">
                        <li>item3-1</li>
                        <li>item3-2</li>
                        <li>item3-3</li>
                    </ul>
                </span>
            </li>
            <li class="right">menu4
                <span class="subnav subnav-right">
                    <ul class="subnav subnav-left">
                        <li>item4-1</li>
                        <li>item4-2</li>
                        <li>item4-3</li>
                    </ul>
                </span>
            </li>
        </ul>
    </div>
</body>

css:

body {
    font-family: arial;
    margin: 0;
}

.navbar {
    height: 40px;
    background-color: black;
}

ul.topnav {
    margin: 0;
    padding: 0;
}

.subnav {
    position: absolute;
}

.subnav-right {
    right: 0;
}

ul.subnav {
    position: relative;
    margin: 4px 0 0 -8px;
    padding: 0;
    display: none;
}

ul.topnav  li{
    list-style: none;
    display: inline-block;
    color: white;
    padding: 4px 8px;
    font-weight: bold;
    line-height: 32px;
    float: left;
    clear: none;
    box-sizing: border-box;
}

ul.subnav li {
    background-color: red;
    list-style: none;
    display: inline-block;
    color: white;
    padding: 4px 8px;
    font-weight: bold;
    position: relative;
    line-height: 32px;
    float: left;
    clear: none;
    box-sizing: border-box;
}

.topnav li:hover {
    background-color: red;
}

.topnav li:hover ul.subnav {
    display: inline-block;
    background-color: red;
}

.nav ul li:hover {
    background-color: black;
}

.nav ul li {
    width: 100%;
}

.nav li ul {
    display: inline-block;
    clear: none;
    position: absolute;
    background-color: red;
    margin: 4px 0 0 -8px;
    padding: 0;
}

.left {
    float: left;
}

.right {
    float: right;
}

Dem jsfiddle:

jsfiddle.net/aLZqZ

Hier ist, was ich versuche zu erreichen:

Bild für nav-Menü

  • Ihre arbeiten. was ist das problem oder die Frage? Sind Sie Fragen, wie es blau?
  • Es ist nicht in Ordnung. Das Bild zeigt deutlich, dass auf der rechten Seite, ich möchte das div-Element ausgerichtet mit dem parent-Listenelement. Alle meine rechts ausgerichtete Elemente sind "rechts: 0', was führt Sie zu der Seite edge. Auch meine sub-nav ist nicht 100% Breite, die ich noch nicht in der Lage zu bekommen, ohne die 'position:relative' an das übergeordnete Listenelement. Warum würde Sie davon aus, dass jemand, dem es gelang, die Verwendung von pseudo-Elemente und horizontale Positionierung nicht wissen, wie um eine Farbe zu ändern?
InformationsquelleAutor Curtis | 2013-01-24
  1. 11

    Ich habe diese für Sie http://jsfiddle.net/aLZqZ/99/. Im Rahmen von 100 versucht, zu. Ich wurde ein wenig besessen und verbrachte mindestens 5 Stunden insgesamt. Eine gute Herausforderung für mich und ich habe nie wirklich fummelte mit sub navs vor.

    Dieses Problem wurde drei Fach:

    • Mit float:right für eine horizontale nav-bar ist in der Regel nicht gut in meiner Erfahrung, weil es bewirkt, dass unerwartete Probleme, auch ist es negiert und ignoriert von den Browsern, wenn das gleiche element positioniert ist, relativ oder absolut (Sie hatte eine Menge überflüssigen code, btw). Ich änderte float:right text-align:right wo es nötig ist. Sehen diese für die horizontale nav-I fest für jemanden, der vor kurzem: Ausrichten/floating meine nav-Leiste auf der rechten Seite

    • Das li-element mit dem sub-Menü nicht positioniert war, daher, die position:absolute und right:0 auf die ul innerhalb es bewegt sich nach der nächsten mit-element mit position:absolute oder :relativ. In diesem Fall war es nicht so, dass html-element wurde; so ist die ul würde geschoben werden den ganzen Weg bis zum Ende der Seite. Ich fügte hinzu, position:relative, um diese li-Elemente, die dann die richtigen:0 verhält sich wie erwartet, aber nicht, dass alle das li-element in einer Zeile und stapelte Sie stattdessen.

    • Sie hatte tags mit display:inline-block, wenn :inline-würde es getan haben, aber noch wichtiger ist, niemand jemals erwähnt, dass white-space:nowrap auf die gleichen Elemente zu tun, was Sie versuchen, ist hier wichtig. inline-block-und nowrap zusammen zwingen sollte, einen line-block-Elemente, die Sie ausrichten können oder schweben Sie als ganze, als wären Sie in einem Absatz. BTW, IE7 braucht eine Besondere Aufmerksamkeit für die inline-block -. Siehe hier: http://robertnyman.com/2010/02/24/css-display-inline-block-why-it-rocks-and-why-it-sucks/

      Machte ich spezielle css an der Unterseite von Ihnen in Ihre Geige zur Trennung der linken und rechten navs, und ich im Grunde verlassen Sie Ihren ursprünglichen css allein. Ich habe auch eingestellt das html ein bisschen. Hier alles ist.

      HTML-Code für die Rechte nav (folgt der HTML-Code für die linke nav):

              <ul class="rightNav">
            <li>menu3
                    <ul class="rightSubNav">
                        <li>item3-1</li>
                        <li>item3-2</li>
                        <li>item3-3</li>
                    </ul>
            </li>
            <li>menu4
                    <ul class="rightSubNav">
                        <li>item4-1</li>
                        <li>item4-2</li>
                        <li>item4-3</li>
                    </ul>
            </li>
        </ul>

      CSS, die ich Hinzugefügt separaten rechten und linken nav:

              ul.rightNav {
        margin:0;
        padding:0;
        text-align: right;
    }

    .rightNav li:hover {
        background-color: red;
    }

    ul.rightNav  li{
        list-style: none;
        display: inline-block;
        color: white;
        padding: 4px 8px;
        font-weight: bold;
        line-height: 32px;
        position:relative;
    }

    ul.rightSubNav {
        position: absolute;
        right:0;
        margin: 4px 0 0 -20px;
        padding: 0;
        display: none;
        white-space:nowrap;
    }
    ul.rightSubNav li {
        background-color: red;
        list-style: none;
        display: inline;
        color: white;
        padding: 4px 8px;
        font-weight: bold;
        position: relative;
        line-height: 32px;
    }

    .rightNav li:hover ul.rightSubNav {
        display: inline-block;
        background-color: red;
    }

      Wenn dies dazu beigetragen, ich würde schätzen, bis die Stimmen und die Antwort auswählen. Wenn Sie dachte sich etwas anderes aus und habe es funktioniert anders, bitte posten. Ich würde lieben, es zu sehen.

      • Sie, sir, sind ein Genie. Ich habe wochenlang versucht, es herauszufinden. Ich kann nicht upvote Sie und geben Ihnen den Ruf Punkte aufgrund meiner geringen status der Mitgliedschaft, aber ich werde wieder kommen und wieder zurück gefallen, wenn ich genug habe. Die meisten, die ich je bekommen habe, es zu tun, war die absolute Positionierung entweder auf der linken oder rechten Seite. Das ist einfach genial. Danke!!!
    InformationsquelleAutor 1934286
Schreibe einen Kommentar