mediengestalter.info
Datenschutzerklärung
FAQ :: Mitgliederliste :: MGi Team

Willkommen auf dem Portal für Mediengestalter
Aktuelles Datum und Uhrzeit: Fr 19.04.2024 11:55 Benutzername: Passwort: Auto-Login

Thema: Drop-Down mit CSS: Geht zur Seite auf statt nach unten! vom 30.03.2009


Neues Thema eröffnen   Neue Antwort erstellen MGi Foren-Übersicht -> Allgemeines - Nonprint -> Drop-Down mit CSS: Geht zur Seite auf statt nach unten!
Autor Nachricht
Inco7
Threadersteller

Dabei seit: 13.04.2008
Ort: -
Alter: -
Geschlecht: -
Verfasst Mo 30.03.2009 17:08
Titel

Drop-Down mit CSS: Geht zur Seite auf statt nach unten!

 Antworten mit Zitat Zum Seitenanfang
Hallo!

Ich habe mir von styleshout.com das kostenlose Template "Refresh" runtergeladen. Oben ist in diesem Design eine horizontale Navigation mit einer ul-Liste. Diese Liste habe ich erweitert, sodass beim Hinüberfahren mit der Maus über "Support" ein Drop-Down-Menü aufgehen soll. Leider geht es zur Seite auf statt nach unten. Könnt ihr mir helfen?

Seite, auf der das Drop-Down-Menü getestet werden kann
CSS-Datei für Drop-Down

HTML-Code für die horizontale Navigation mit Drop-Down bei "Support":
Code:

<ul id="nav">
    <li id="current"><a href="index.html">Home</a></li>
    <li><a href="index.html">Archives</a></li>
    <li><a href="index.html">Downloads</a></li>

    <li><a href="index.html">Services</a></li>
    <li><a href="index.html">Support</a>
        <ul>
            <li><a href="#">E-Mail</a></li>
            <li><a href="#">Telefon</a></li>
        </ul>
    </li>

    <li><a href="index.html">About</a></li>
</ul>


Könnt ihr mir sagen, wie ich es schaffe, dass das Menü nach unten aufgeht? Es soll praktisch so aussehen:
Bild bei Imageshack

Danke im Voraus!
  View user's profile Private Nachricht senden
m
Moderator

Dabei seit: 18.11.2004
Ort: -
Alter: -
Geschlecht: Männlich
Verfasst Mo 30.03.2009 17:12
Titel

Antworten mit Zitat Zum Seitenanfang
Quick n dirty:

Code:
ul li {
  position: relative;
}
ul li ul {
  position: absolute;
  left: n px;
  top: n px;
  width: n px;
}
ul li ul li {
  display: block;
  float: none;
}
  View user's profile Private Nachricht senden Website dieses Benutzers besuchen
Anzeige
Anzeige
Inco7
Threadersteller

Dabei seit: 13.04.2008
Ort: -
Alter: -
Geschlecht: -
Verfasst Mo 30.03.2009 17:31
Titel

Antworten mit Zitat Zum Seitenanfang
Danke, sieht jetzt schon viel besser aus und funktioniert. Aber:
- Der Hover-Effekt färbt jetzt nur noch das Halbe graue Kästchen um den Link.
- Ich muss für jeden Eintrag in der Navigation die Top-Left-Werte berechnen.
- Wird das so überhaupt bei allen Auflösungen und in allen Browsern gleich angezeigt? Vielleicht müssten es bei einer anderen Auflösung nicht 38px (left) sondern 28px (left) sein (als Beispiel)?
  View user's profile Private Nachricht senden
 
Ähnliche Themen Art drop down menü?
Drop-Down Navigation
Drop Down Menü
CSS Drop Down Menü
Drop-Down Menü
Drop Down Menü
Neues Thema eröffnen   Neue Antwort erstellen
MGi Foren-Übersicht -> Allgemeines - Nonprint


Du kannst keine Beiträge in dieses Forum schreiben.
Du kannst auf Beiträge in diesem Forum nicht antworten.
Du kannst an Umfragen in diesem Forum nicht mitmachen.

Mediengestalter.info ist ein Projekt von Webformatik :: Forensoftware: phpBB