css menu 3 or 4 layers - confusing code - css

Question

i'm new with css and got an code for a 2 layer css menu but i want 3 layers or 4 but its a bit confusing with ul ul li ul li hover a and so on. please can you help me? I`m trying it for 3 days but i only get the main menu and the second layer correctly styled...
/* Hauptmenü */
ul {
text-align: left;
display: inline;
text-decoration:none;
z-index:1;
padding: 0px 0px 0px 0px;
list-style: none;
}
ul a {
text-decoration:none;
color: #fff;
z-index:1;
}
ul li {
font: bold 13px/18px sans-serif;
display: inline-block;
height:23px;
position: relative;
margin: 2px 8px 0px -4px;
padding: 1px 5px 0px 5px;
color: #fff;
cursor: pointer;
z-index:1;
}
ul li:hover {
background: #db0133;
z-index:2;
}
/* Hauptmenü Ende*/
/* Untermenü 1*/
ul li ul li {
font: normal 13px/18px sans-serif;
background: none;
margin: 0px 0px 0px 0px;
display: block;
color: #000;
z-index:1;
}
ul li ul li:hover {
font: normal 13px/18px sans-serif;
background: none;
margin: 0px 0px 0px 0px;
color: #db0133;
background:#f0f0f0;
text-decoration: none;
z-index:1;
}
ul li ul {
padding: 0;
position: absolute;
top: 25px;
z-index:2;
width: 180px;
margin: -1px 0px 0px 0px;
display: none;
opacity: 1;
visibility: hidden;
background: #fff;
border: 1px solid #dcdcdc;
}
ul li:hover ul {
display: block;
opacity: 1;
visibility: visible;
z-index:2;
}
/* Untermenü 1 Ende*/
/* Untermenü 2 */
ul li ul li ul li{
padding: 0;
position: absolute;
top: 25px;
z-index:2;
width: 180px;
margin: 0px 0px 0px 175px;
display: none;
opacity: 1;
visibility: hidden;
background: #fff;
border: 1px solid #dcdcdc;
}
ul li ul li:hover ul li {
display: block;
opacity: 1;
visibility: visible;
z-index:2;
}
/*Untermenü 2 Ende */
<!-- NAVIGATION ENDE -->

Answer 1

Without reading the full code I am pretty sure that I know what you mean with "confusing".
when you style a ul-element, it will also affect the inner ul-elements, right?
(Same for the li-elements)
I recommend you this solution:
Classify your ul - hierarchy like this in your HTML:
<ul class="navigation-layer-0">
<li>
First layer
<ul class="navigation-layer-1">
<li>
Second layer
<ul class="navigation-layer-2">
<li>Third layer</li>
</ul>
</li>
</ul>
</li>
Now in your CSS you can do the following to always style just one layer:
.navigation-layer-0 {
/* properties for your first layer go here */
}
.navigation-layer-0 > li {
/* properties for your first layer list-elements go here */
}
.navigation-layer-1 {
/* properties for your second layer go here */
}
.navigation-layer-1 > li {
/* properties for your second layer list-elements go here */
}
/* same for third layer */
".navigation-layer-x > li" means,
Matches any li element that is a direct child of an element .navigation-layer-x.
By this you only style the list-elements of one specific list-layer.
Hope this helps!