CSS-Javascript Menü und Submenü-Positionierung
ole2211
- javascript
Tach!
Habe gerade ein kleines Problem mit einem CSS-Javascript-basiertem horizontalen 2-Level Menü: Die Subemnü-Punkte sollen unterhalb der jeweiligen Hauptmenü-Punkte beim "mouseover" auch horizontal erscheinen (eben auf einer Zeile hintereinander quasi)... Soweit so gut, benutze ja ein freeware-Script, da ich mich nicht so gut auskenne. Nun habe ich das Problem, dass die Submenüs immer linksbündig erscheinen, unabhängig vom Parent-Hauptmenü immer an der selben Stelle am linken Bildschirmrand beginnen... und ich möchte aber der Übersichtlichkeit halber, dass das jeweilige Submenü erst direkt unter des Hauptmenüpunkts ansetzt...
Hat jemand ein Tipp, wie ich das definieren könnte?
Merci...
Hat jemand ein Tipp, wie ich das definieren könnte?
Ja. In der CSS-Datei bei der li-Definition (unterebene) float: left eingeben.
ach ja, mir ist noch was eingefallen: http://de.selfhtml.org/css/layouts/navigationsleisten.htm#modern
Ja. In der CSS-Datei bei der li-Definition (unterebene) float: left eingeben.
Hui! Danke, das ging ja schnell... Verstehe es allerdings nicht ganz... meine CSS-Datei sieht in etwa so aus:
.basictab{
padding: 3px 0;
margin-left: 0;
font: bold 12px Verdana;
border-bottom: 1px solid gray;
list-style-type: none;
margin-bottom: 0;
text-align: left; /*set to left, center, or right to align the menu as desired*/
}
.basictab li{
display: inline;
margin: 0;
}
.basictab li a{
text-decoration: none;
padding: 3px 7px;
margin-right: 2px;
border: 1px solid gray;
border-bottom: none;
background-color: white;
color: black;
}
.basictab li a:visited{
color: black;
}
.basictab li a:hover{
background-color: #dbffff;
color: black;
}
.basictab li a:active{
color: black;
}
.basictab li.selected a{ /*selected tab effect*/
position: relative;
top: 1px;
padding-top: 4px;
background-color: #dbffff;
color: black;
}
.submenustyle{
padding: 2px 1px;
border: 0px;
border-top-width: 0;
width: auto;
display: none;
filter:alpha(opacity=0);
-moz-opacity:0;
}
* html .submenustyle{ /*IE only width definition*/
width: 100%;
}
.submenustyle a{
margin-left: 15px;
border-right: 0px;
padding: 1px 5px;
text-decoration: none;
color: black;
}
.submenustyle a:hover{
background-color: white;
font: bold 14 px;
}
Wo käme da das "float: left" hin??