Hallo Knut!
Ich komme immer besser zu recht mit dem anpassen meines Menüs.
Unterebenen anlegen klappt auch.
Nur eins macht mich stutzig.
Ich hab alles nach Deiner Anleitung durchgeführt und auch noch 2 weitere Ebenen erstellt.
Sieht so aus:
/*================================================================
CSS for an vertical menu
CSS for <div id="nav_list1">{ NAV_LIST }</div>
Level 0 - 1;
22.10.06 flip-flop (KH)
----------------------------------------------------------------*/
#nav_list1 {
margin: 0;
padding: 0 0 0 0;
border: 0;
text-decoration: none;
/* e.g. 11px font and 19px height */
font: normal normal 14px/19px Verdana, Geneva, Arial, Helvetica, sans-serif;
width: 200px; /* Width of Menu Items */
/* float:left; */
}
#nav_list1 em { font-style: normal; }
#nav_list1 ul {
margin: 0;
padding: 0;
border: 0;
list-style: none;
width: 200px; /* Width of Menu Items */
}
#nav_list1 ul li { position: relative; }
/*--- Styles for Menu Items ------------------------------------*/
/*--- LEVEL X --------------------------------------------------*/
#nav_list1 ul li a,
#nav_list1 ul li a:link,
#nav_list1 ul li a:visited,
#nav_list1 ul li a:active {
display: block;
text-decoration: none;
text-transform: none;
color: #000000;
/* image adjust e.g. left gap 10px */
padding: 1px 0 0 5px; /* Text adjust e.g. left gap 25px */
border-bottom: 0px solid #ccc; /* IE6 Bug */
}
#nav_list1 ul li.listActive a,
#nav_list1 ul li.listActive a:link,
#nav_list1 ul li.listActive a:visited,
#nav_list1 ul li.listActive a:active {
color: black;
font-weight: bold;
}
#nav_list1 ul li a:hover,
#nav_list1 ul li.listActive a:hover {
color: black;
/* text-decoration: underline; */
background: #FFFFFF;
}
/*--- LEVEL X + 1--------------------------------------------------*/
#nav_list1 ul ul li a,
#nav_list1 ul ul li a:link,
#nav_list1 ul ul li a:visited,
#nav_list1 ul ul li a:active,
#nav_list1 ul li.listActive ul li a,
#nav_list1 ul li.listActive ul li a:link,
#nav_list1 ul li.listActive ul li a:visited,
#nav_list1 ul li.listActive ul li a:active {
display: block;
text-decoration: none;
text-transform: none;
color: #000000;
/* image adjust e.g. left gap 25px */
padding: 1px 0 0 15px; /* Text adjust e.g. left gap 40px */
border-bottom: 0px solid #ccc; /* IE6 Bug */
}
#nav_list1 ul ul li.listActive a,
#nav_list1 ul ul li.listActive a:link,
#nav_list1 ul ul li.listActive a:visited,
#nav_list1 ul ul li.listActive a:active {
color: black;
font-weight: bold;
}
#nav_list1 ul ul li a:hover,
#nav_list1 ul ul li.listActive a:hover,
#nav_list1 ul li.listActive ul li a:hover {
color: black;
/* text-decoration: underline; */
}
/* Holly Hack. IE Requirement \*/
* html #nav_list1 ul li { float: left; height: 1%; }
* html #nav_list1 ul li a { height: 1%; }
/*--- LEVEL X + 2--------------------------------------------------*/
#nav_list1 ul ul ul li a,
#nav_list1 ul ul ul li a:link,
#nav_list1 ul ul ul li a:visited,
#nav_list1 ul ul ul li a:active,
#nav_list1 ul ul li.listActive ul li a,
#nav_list1 ul li.listActive ul li a:link,
#nav_list1 ul li.listActive ul li a:visited,
#nav_list1 ul li.listActive ul li a:active {
display: block;
text-decoration: none;
text-transform: none;
color: #000000;
/* image adjust e.g. left gap 25px */
padding: 1px 0 0 25px; /* Text adjust e.g. left gap 40px */
border-bottom: 0px solid #ccc; /* IE6 Bug */
}
#nav_list1 ul ul ul li.listActive a,
#nav_list1 ul ul ul li.listActive a:link,
#nav_list1 ul ul ul li.listActive a:visited,
#nav_list1 ul ul ul li.listActive a:active {
color: black;
font-weight: bold;
}
#nav_list1 ul ul ul li a:hover,
#nav_list1 ul ul ul li.listActive a:hover,
#nav_list1 ul ul li.listActive ul li a:hover {
color: black;
/* text-decoration: underline; */
}
/* Holly Hack. IE Requirement \*/
* html #nav_list1 ul li { float: left; height: 1%; }
* html #nav_list1 ul li a { height: 1%; }
/*--- LEVEL X + 3--------------------------------------------------*/
#nav_list1 ul ul ul ul li a,
#nav_list1 ul ul ul ul li a:link,
#nav_list1 ul ul ul ul li a:visited,
#nav_list1 ul ul ul ul li a:active,
#nav_list1 ul ul li.listActive ul li a,
#nav_list1 ul li.listActive ul li a:link,
#nav_list1 ul li.listActive ul li a:visited,
#nav_list1 ul li.listActive ul li a:active {
display: block;
text-decoration: none;
text-transform: none;
color: #000000;
/* image adjust e.g. left gap 25px */
padding: 1px 0 0 35px; /* Text adjust e.g. left gap 40px */
border-bottom: 0px solid #ccc; /* IE6 Bug */
}
#nav_list1 ul ul ul ul li.listActive a,
#nav_list1 ul ul ul ul li.listActive a:link,
#nav_list1 ul ul ul ul li.listActive a:visited,
#nav_list1 ul ul ul ul li.listActive a:active {
color: black;
font-weight: bold;
}
#nav_list1 ul ul ul ul li a:hover,
#nav_list1 ul ul ul ul li.listActive a:hover,
#nav_list1 ul ul ul li.listActive ul li a:hover {
color: black;
/* text-decoration: underline; */
}
/* Holly Hack. IE Requirement \*/
* html #nav_list1 ul li { float: left; height: 1%; }
* html #nav_list1 ul li a { height: 1%; }
/* ==== End nav_list1 === */
Jetzt passiert aber folgendes.
Je mehr Unterebenen ich anlege, desto schlimmer wird es...
In meiner NAV_LIST wird, wenn ich die erste Ebene "X+1" öffne,
diese nicht wie gewünscht, mit einem kleinen Einzug, dargestellt, sondern immer mit maximalsten, also jenach dem wieviele Untereben ich habe (hier z.B. X+3).
Öffnen ich dann weitere Unterbenen "X+2", dann verschiebt sich der Einzug nach vorn.
Also so:
So sieht es wenn alle Eben x, x+1, x+2 u. x+3 geöffnet sind (so soll es auch sein...!)
Ebene 1 X
Ebene 2 -X
Ebene 3 --X
Ebene 4 ---X
wenn ich aber beginne zu navigieren sieht es so aus:
Ebene 1 X
Ebene 2 ---X
und nich so (wie es sein sollte)
Ebene 1 X
Ebene 2 -X
Ist das verständlich erklärt?
Sonst mal hier als Beispiel:
http://bergwitzsee.de/index.php?experimente
(Links die Navigation "Ebene X" usw.)
Gibt es eine Möglichkeit dies zu verhindern.
Wäre schön, wenn Du mir noch einmal helfen könntest
DANKE!!!
marek