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

[xero7]

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

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;
}

 <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>

 

[noltehans]

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]

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

ein ganz simple horizontale Linie

hr {
    display: block;
    height: 1px;
    border: 0;
    border-top: 1px solid #ccc;
    margin: 1em 0;
    padding: 0;
}

 

[xero7]

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

Perfekt. Vielen Dank für die Lösungen. Klappt super