3.2k Aufrufe
Gefragt in Webseiten HTML von
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 von friedel Experte (3.3k Punkte)
@computerschrat: Das li mit Services ist doch korrekt geschlossen. Genau so muss es sein. (Ich habe die beiden zusammengehörenden Tags fett gemacht.)

[quote][pre]<ul>
<li class="current"><a href="Home.php">Home</a></li>
<li><a href="about.html">About</a></li>
[b]<li>[/b]<a href="downloads.php">Services</a>
<ul>
<li><a>Dokumente</a></li>
<li><a>Dienste</a></li>
</ul>
[b]</li>[/b]
</ul>[/pre][/quote]

Ich rücke meine Quelltexte immer so ein, dass alles übersichtlich bleibt. dann sieht man die Verschachtelung auf den ersten Blick und kann nie vergessen ein Element zu schließen.

[code]<header>
  <div class="container">
    <div id="branding">
      <h1><span class="highlight">SK</span> Homepage</h1>
    </div>
    <nav>
      <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>
    </nav>
  </div>
</header>[/code]
0 Punkte
Beantwortet von computerschrat Profi (32.2k Punkte)
@Friedel: Ja, das ist richtig. Ich hatte das schließende </li> übersehen.

Das Hauptproblem in Zaines Webseite liegt darin, dass die eingeblendeten Listenelemente den Textblock breiter machen. Damit rutscht alles nach links, weil der Block rechtsbündig gesetzt ist.
Als Versuch hebe ich dann einfach mal die rechtsbündige Formatierung entfernt. Nicht weil das sie Lösung sein sollte, sondern nur um zu sehen, ob es wirklich daran liegt. Damit rutschte natürlich alles nach links, aber das Verschieben des Blocks beim Hovern über den Menüpunkt ist verschwunden.

Gruß
computerschrat
0 Punkte
Beantwortet von friedel Experte (3.3k Punkte)
Die ganzen li haben alle ein float:left;. Das macht die Probleme. Das wird doch gar nicht gebraucht. Als inline-block werden sie doch eh so dargestellt. Ohne das float:left; sind die Punkte der inneren Liste untereinander. Aber natürlich nicht unter dem Punkt Services. Das erreicht man, indem man die li der äußeren Liste zum Bezugspunkt für die innere Liste macht. Dazu ergänzt man in die li der äußeren Liste einfach position: relative;.

Jetzt muss nur noch die Vertikale Ausrichtung korrigiert werden. dazu würde ich, wie oben schon erwähnt, noch [code]      ul li ul {
          position: absolute;
      }[/code] ergänzen. Damit die sichtbar werdende innere Liste nicht abgeschnitten wird, muss aus dem container das overflow:hidden; verschwinden. Oder du ergänzt beim li der äußeren Liste eben overflow:visible;. Dann brauchst du natürlich noch eine Hintergrundfarbe für die li der inneren Liste...
0 Punkte
Beantwortet von friedel Experte (3.3k Punkte)
P.S. Außerdem würde ich in so einem Fall die inneren Listenpunkte nicht mit display:none unsichtbar machen. Ich würde sie von vorn herein mit display:block formatieren und mit visibility:hidden unsichtbar machen. Dann sind sie ohne hover zwar unsichtbar, der Platz für sie ist aber trotzdem belegt. Dadurch verändert sich die Größe des umgebenden li nicht durch das Einblenden. Allerdings verändert sich die Größe bei dir zusätzlich durch die Schriftformatierung bei hover.
0 Punkte
Beantwortet von
Hallo zusammen,

habe jetzt erst nochmal reingeschaut. Tatsächlich hat das mit

ul li ul{

positon: absolute;
}

 das Problem gelöst. :)

Vielen dank für die hilfe!!

VG

Zaine
...