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