ul li ul li wird nicht richtig untereinader angezeigt

2,257 Aufrufe
Gefragt 11, Sep 2017 in Webseiten HTML von Zaine
Hallo zusammen, ich habe folgenden HTML5 code:

<header>
      <div class="container">
        <div id="branding">
          <h1><span class="highlight">SK</span> Homepage</h1>
        </div>
        <nav>
        [b]  <ul>
            <li class="current"><a href="Home.php">Home</a></li>
            <li><a href="about.html">About</a></li>
            <li><a href="downloads.php">Services</a>
                <ul>
                    <li><a>Dokumente</a></li>
                    <li><a>Dienste</a></li>
                </ul>
            </li>   
          </ul>
[/b]        </nav>
      </div>
    </header>

und folgenden CSS3 code:

ul li ul li{
    display: none;
}

ul li:hover ul li{
    display: inline-block;
    list-style-type: none;
}

das Ziel ist, dass die liste in Services, untereinander angezeigt wird, aber im Moment stehen "Dokumente" und "Dienste" nebeneinander unter Home, About und Services. Wie bekomme ich das hin ,dass beim hovern Dokumente und Dienste unter Services untereinander stehen?

Habe mal ein Screenshot gemacht:

[url]https://picload.org/view/dgrdogpr/problem.png.html[/url]

Vielen Dank schon mal im Voraus!

VG
Zaine

15 Antworten

0 Punkte
Beantwortet 11, Sep 2017 von computerschrat Profi (17,925 Punkte)
Hallo Zaine,

wenn ich das HTML bei mir starte, stehen "Dokumente" und "Dienste" als Unterpunkte unter "Services". Jeweils etwas eingerückt aber in getrennten Zeilen. Ich habe allerdings, weil es mir zu viel Tipparbeit war :-) das CSS File nicht eingebunden.

Vielleicht hilft es aber, wenn du den Listenpunkt "Servicess noch schließt. Dort fehlt das </li>

Gruß
computerschrat
0 Punkte
Beantwortet 11, Sep 2017 von Zaine
Hallo Computerschrat,

seltsam, weil bei mir steht es halt echt nebeneinander und das ergibt irgendwie keinen Sinn.

Ne das li wird über der letzten ul geschlossen, weil sonst werden ja Services und Dienste dauerhaft angezeigt.

Naja vielleicht hast du oder jemand anderes noch ne Idee dazu, ansonsten probiere ich einfach ein bisschen rum, wird irgendwann ja klappen.

Trotzdem erst mal Danke für die Antwort.

VG

Zaine
0 Punkte
Beantwortet 11, Sep 2017 von Zaine
Hallo Computerschrat,

Ich hab die php und die css Datei mit dem gesamten code in meine Dropbox geladen. Wenn du möchtest und Zeit hast,kannst du dir das ja mal anschauen. Es scheint an der css zu liegen, aber ich finde den Fehler nicht.

Dropbox link:[url] https://www.dropbox.com/sh/icn7k7wj7a1wou6/AADx-4ekSiI6wtnRBWx9AvuJa?dl=0[/url]

Vielen Dank und VG

Zaine
0 Punkte
Beantwortet 11, Sep 2017 von computerschrat Profi (17,925 Punkte)
Hallo Zaine,

bist du sicher, die richtigen Files hochgeladen oder verlinkt zu haben?
In den beiden Files finde ich die von dir in der Frage zitierten Texte nicht und ich finde auch nirgends eine Referenz auf style.css, demnach würde die Datei gar nicht eingebunden werden.

Gruß
computerschrat
0 Punkte
Beantwortet 11, Sep 2017 von Zaine
Hallo Computerschrat,

sorry, habe ich nicht bedacht.

Ich schicke dir den Link zu meinem OneDrive, da findest du die Komplette Ordnerstruktur. Am besten lädts du einfach den Projektordner runter dann müsste alles stimmen.

[url]https://simonklein-my.sharepoint.com/personal/simon_klein_simonklein_onmicrosoft_com/_layouts/15/guestaccess.aspx?folderid=110b93cfa48794f649a965061efbeb714&authkey=AYIssSXxEOQeXyCvGXK8xPk&expiration=2017-09-13T13%3a48%3a37.000Z[/url]

VG

Zaine
0 Punkte
Beantwortet 11, Sep 2017 von computerschrat Profi (17,925 Punkte)
Hallo Zaine,

ich habe jetzt mal deinen Code geladen und dann in die index.php noch einen Link auf die Home.php gesetzt, damit ich die aufrufen kann.

Egal mit welchem Browser ich es versuche, sobald ich den Mauszeiger auf Dienste lege, erscheinen Dokumente und Angebote darunter, jedes in einer eigenen Zeile.

Das funktioniert hier mit dem Internet Explorer, Firefox, Chrome und avast-SafeZone Browser.

Allerdings ändert sich beim Hovern die Formatierung, so dass die drei Überschriften "Home" "About" und "Dienste" etwas nach links rutschen und der gesamte Seiteninhalt ab der roten horizontalen Linie nach unten rutscht, weil die beiden Zeilen Dokumente und Angebote eingefügt werden.

Vielleicht hilft es, wenn du mal den Cache des Browserl löschst. Oft werden neue CSS-Anweisungen erst dann tatsächlich übernommen und zur Anzeige gebracht.

Gruß
computerschrat
0 Punkte
Beantwortet 12, Sep 2017 von Zaine
Hallo Computerschrat,

erst mal Danke und, ja hab gestern noch mal alles geschlossen gehabt und dann neu gastartet dann war es untereinander.

Hast du noch ne Idee, wie ich verhindern kann das es nach links rutscht?

VG

Zaine
0 Punkte
Beantwortet 12, Sep 2017 von computerschrat Profi (17,925 Punkte)
Hallo Zaine,

wenn die beiden Unterpunkte eingeblendet werden, wird die Anzeige breiter.

Durch die Formatierung float:right  für den Headerbereich nav rutscht dann das ganze Paket nach links.

Ich habe versuchsweise im css  die fragliche Zeile herauskommentiert:
[code]header nav{
/*  float:right; */
  margin-top:10px;
}
[/code]

Dann rutscht zwar der ganze Bereich nach links, aber die Position bleibt meim Hovern über den Link konstant.
Jetzt rutscht nur noch der Seitenihnalt nach unten. Da musst du einfach etwas mehr Platz für den Header vorsehen und die Seite etwas tiefer anfangen lassen.

Gruß
computerschrat
0 Punkte
Beantwortet 12, Sep 2017 von Zaine
Hallo computerschrat,

okay werde ich später mal ausprobieren.

Vielen Dank für deine Hilfe!

VG

Zaine
0 Punkte
Beantwortet 13, Sep 2017 von friedel Experte (3,271 Punkte)
Ich habe das ganze nicht nach gebaut, aber wenn die CSS-Datei korrekt eingebunden ist, müssen die Punkte Dokumente und Dienste natürlich nebeneinander stehen, wenn sie sichtbar sind. Normalerweise sind sie dank [code]ul li ul li{
display: none;
}[/code] nicht sichtbar. Sie erscheinen dank [code]ul li:hover ul li{
display: inline-block;
...
}[/code] sobald die Maus über irgend einem Punkt der äußeren Liste ist. Und zwar als Inline-Block ― also nebeneinander.

Ich vermute mal, dass die beiden Punkte nur erscheinen sollen, wenn die Maus über dem Listenpunkt Services steht. Dazu würde ich [code]<li><a href="downloads.php">Services</a>[/code] zu  [code]<li id="Services"><a href="downloads.php">Services</a>[/code] verändern. Dann in der CSS [code]ul li:hover ul li{
display: inline-block;
...
}[/code] zu [code]#Services:hover ul li{
display: block;
...
}[/code] ändern.

Damit die innere Liste in ihrem li der äußeren Liste bleibt, würde ich die li der äußeren Liste relativ positionieren und die innere Liste  absolut. Dann ist die innere ul linksbündig im li der äußeren Liste.
...