Submenü anders gestalten 2

An sich wirklich einfach. Jedoch möchte ich mittels CSS das Menü so gestalten, dass sich die zweite und dritte Ebene komplett von der ersten unterscheidet. Hintergrund ist der: Ich schreibe aktuell eine Prozesslandkarte und die erste Ebene soll danach aussehen. Innerhalb der Prozesslandkarte kann man die verschiedenen Abteilungen anwählen. Ist das irgendwie möglich? Bisher sahen die Untermenüs genauso aus wie die erste Ebene. Es müsste so doch ohne Probleme gehen, oder?:

Kommentar abgeben zu diesen Beitrag/Code ?
Dann hier klicken

Der hier verwendete Code

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
35
36
37
    <style>
   /*       ab   hier
Einstellungen für den vorderen Pfeil */
nav a:after {
content: "";  
    border-top: 40px solid transparent;
border-bottom: 40px solid transparent;
border-left: 40px solid #4060A5;
position: absolute; right: -40px; top: 0px; 
}
/* Einstellungen für den hinteren Pfeil */
nav a:before {
 content: "";
  position: absolute;
  margin-top: -30px;   
  border-width: 40px 0 40px 40px;
  border-style: solid;
  border-color: #4060A5 #4060A5 #4060A5 transparent;
  left: -40px;   
}
/* Wenn Maus über erste Ebene schwebt -> Mitte*/
nav a:hover {
  background-color: #1abc9c;
  display: block;
}
/* Wenn Maus über erste Ebene schwebt -> Vorderer Pfeil*/
nav a:hover:before {
  border-color: #1abc9c;
  border-left-color: transparent;
}
/* Wenn Maus über erste Ebene schwebt -> Hinterer Pfeil*/
nav a:hover:after {
    border-left-color: #1abc9c;
}
XXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXX