Submenü anders gestalten

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>
  nav{
  width:100%;
  height:50px;
  border:2px solid red;
}
ul{
  margin:0;
  padding:0;
}
nav>li{
  width:33%
}
 /* alle level*/
li{
  float: left;
  list-style-type: none;
  background-color: blue;
  line-height:50px;
  margin-right:1px;
  text-align:center;
  position: relative;
}
ul>li{
  width:100%;
}
 
li > a{
  text-decoration: none;
  color: white;
  display:block;
  padding: 0 10px;
}
XXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXXX