Horizontale Navigation 2. Ebene hat nicht die gleiche Breite?!
alija
- css
0 Shyne
Hallo!
Ich bräuchte Hilfe bei einer horizontalen Navigation mit einer zweiten Navigationsebene. Vorgegangen bin ich mit display:none, li:hover display:block. Meine li-Elemente haben keine feste Breite. Jetzt möchte ich gerne, dass die Elemente der zweiten Ebene (1,2) genauso breit sind wie der übergeordnete Navigationspunkt (Anwälte).
Es wäre toll, wenn jemand Antwort weiß. Vielen Dank!
Das ist die Navigation:
<div id="navigationsbox">
<ul id="nav">
<li><a href="?"><span class="selected">home</span></a></li>
<li><a href="h?">AnwÄlte</a>
<ul>
<li><a href="?">1</a></li>
<li><a href="?">2</a></li>
</ul>
</li>
<li><a href="?">leistungen</a></li>
<li><a href="?">kontakt</a></li>
<li><a href="?">impressum</a></li>
</ul>
</div>
Und das CSS:
#navigationsbox {
width: 553px;
height:19px;
margin-top: 0px;
margin-bottom: 0px;
margin-left: auto;
margin-right: auto;
padding: 0px;
}
#nav {
list-style-type:none;
margin:0;
padding:0;
}
#nav li ul {
list-style-type:none;
position:absolute;
display:none;
margin:0px;
padding-left:0px;
padding-right:0px;
padding-top:2px;
float:none;
}
#nav li:hover ul { display:block; }
#nav li {
float:left;
position:relative;
}
#nav li a {
list-style-type:none;
text-decoration:none;
margin:0;
padding-right: 10px;
padding-left: 10px;
font-family: "Lucida Grande", Lucida Sans, Lucida Sans Unicode, Arial, sans-serif;
font-size: 12px;
font-weight: 500;
text-transform: uppercase;
}
#nav li ul a {
list-style-type:none;
text-decoration:none;
margin:0;
font-family: "Lucida Grande", Lucida Sans, Lucida Sans Unicode, Arial, sans-serif;
font-size: 12px;
font-weight: 500;
text-transform: uppercase;
}
ul#nav li a:link {
background-color: #7D7B7B;
color: #cccccc;
}
ul#nav li a:visited {
background-color: #7D7B7B;
color: #cccccc;
}
ul#nav li a:hover {
background-color: #dadc3f;
color: #FFFFFF;
}
ul#nav li a:focus {
color: #DADC41;
}
ul#nav li ul a:link {
background-color: #7D7B7B;
color: #cccccc;
}
ul#nav li ul a:visited {
background-color: #7D7B7B;
color: #cccccc;
}
ul#nav li ul a:hover {
background-color: #dadc3f;
color: #FFFFFF;
}
ul#nav li ul a:focus {
color: #DADC41;
}
1. Wäre es gut, wenn du nur den relevanten Teil posten würdest.
2. Wäre ein Beispiel gut, falls verfügbar online.
3. Wenn ich dich richtig verstanden habe, wird das nicht so funktionieren, wie dus dir vorstellst.