Antworten auf deine Fragen:
Neues Thema erstellen

[CSS, XHTML] Dropline Navigation ohne Verrutschen b. Bold

xero7

» Unterdrück(t)er

Moin, moin,

ich bin kurz vorm Verzweifeln. Ich würde gerne eine Dropline Navigation erstellen, wie unten auf dem Bild aufgeführt. Leider habe ich bei meinem css Code immer das Problem, dass wenn ich oben über die Links gehe und somit durch den a:hover Effekt die Links dann "fett" werden, dass sich die daneben liegenden Links immer mitverschieben...

Meine Lösung wäre nun gewesen, dass ich den einzelnen Links eine feste Breite zuordne, scheint bei display: inline, aber nicht möglich zu sein? Display Block führt leider dazu, dass die untere "subnavigation" dann erst direkt mit dem ersten link unter dem aktiven Link anfängt und nicht wie gewollt alle direkt von links an aufgeführt werden.

Ich hoffe mein Problem ist verständlich, wenn nicht kann ich es gerne noch anderes versuchen zu erklären.

Solltest Ihr eine andere Lösung zu dieser Form der Navigation haben, wäre ich auch dankbar.

http://www.myimg.de/?img=Unbenannt15b1c4.jpg

Vielen Dank im Voraus!

Liebe Grüße
xero7


Code:
ul#nav {
  float: left;
  margin: 0;
  padding: 0;
  list-style: none;
  
}
 
ul#nav li {
  display: inline;
}
 
ul#nav li a {
  float: left;
  font-family: tahoma, arial;
  font-size: 13px;
  line-height: 40px;
  color: #fff;
  text-decoration: none;
  margin: 0;
  padding: 0 0px;
  padding-right: 30px;
}
 

ul#nav .current a, ul#nav li:hover > a  {
  color: #fff;
  text-decoration: none;
  font-weight: bold;
}
 

ul#nav  ul {
  display: none;
}
 

ul#nav li:hover > ul {
  position: absolute;
  display: block;
  height: 45px;
  position: absolute;
  margin: 40px 0 0 0;
}
 
ul#nav li:hover > ul li a {
  float: left;
  font-family: tahoma, arial;
  font-size: 13px;
  line-height: 45px;
  color: #fff;
  text-decoration: none;
  margin: 0;
  padding: 0 80px 0 0;
}
 
ul#nav li:hover > ul li a:hover {
  color: #120000;
  text-decoration: none;
  text-shadow: none;
}
HTML:
 <div class="navigation">

<ul id="nav">
  <li class="current" style="width: 100px;"><a href="#">Home</a>
    <ul>
      <li><a href="#">Sub1</a></li>
      <li><a href="#">Sub1</a></li>
      <li><a href="#">Sub1</a></li>
    </ul>
  </li>
  <li style="width: 170px;"><a href="#">asdsadasdasd</a>
    <ul>
      <li><a href="#">Sub2</a></li>
      <li><a href="#">Sub2</a></li>
      <li><a href="#">Sub2</a></li>
    </ul>
  </li>
  <li style="width: 180px;"><a href="#">sdfsdfsdfdfg</a>
    <ul>
      <li><a href="#">Sub3</a></li>
      <li><a href="#">Sub3</a></li>
      <li><a href="#">Sub3</a></li>
    </ul>
  </li>
  <li style="width: 170px;"><a href="#">asdasdasdasd</a>
    <ul>
      <li><a href="#">asdasdasd</a></li>
      <li><a href="#">asdasdasd</a></li>
      <li><a href="#">asdasd</a></li>
    </ul>
  </li>
  <li style="width: 100px;"><a href="#">Kontakte</a></li>
  <li style="width: 100px;"><a href="#">Links</a></li>
  <li style="width: 100px;"><a href="#">Impressum</a></li>
</ul>

</div>
 
Zuletzt bearbeitet:

noltehans

Aktives Mitglied

AW: [CSS, XHTML] Dropline Navigation ohne Verrutschen b. Bold

Hi xero7,

nimm anstatt bold z.B.
text-shadow:1px 0 0 #fff;

Funktioniert nicht in den alten IE's (6-8).
 

cythux

Aktives Mitglied

AW: [CSS, XHTML] Dropline Navigation ohne Verrutschen b. Bold

ein ganz simple horizontale Linie
Code:
hr {
    display: block;
    height: 1px;
    border: 0;
    border-top: 1px solid #ccc;
    margin: 1em 0;
    padding: 0;
}
 

xero7

» Unterdrück(t)er

AW: [CSS, XHTML] Dropline Navigation ohne Verrutschen b. Bold

Perfekt. Vielen Dank für die Lösungen. Klappt super :)
 
Bilder bitte hier hochladen und danach über das Bild-Icon (Direktlink vorher kopieren) platzieren.
Antworten auf deine Fragen:
Neues Thema erstellen

Willkommen auf PSD-Tutorials.de

In unseren Foren vernetzt du dich mit anderen Personen, um dich rund um die Themen Fotografie, Grafik, Gestaltung, Bildbearbeitung und 3D auszutauschen. Außerdem schalten wir für dich regelmäßig kostenlose Inhalte frei. Liebe Grüße senden dir die PSD-Gründer Stefan und Matthias Petri aus Waren an der Müritz. Hier erfährst du mehr über uns.

Stefan und Matthias Petri von PSD-Tutorials.de

Nächster neuer Gratisinhalt

03
Stunden
:
:
25
Minuten
:
:
19
Sekunden

Flatrate für Tutorials, Assets, Vorlagen

Zurzeit aktive Besucher

Keine Mitglieder online.

Statistik des Forums

Themen
118.611
Beiträge
1.538.341
Mitglieder
67.524
Neuestes Mitglied
BSKGA
Oben