CSS-blind?

Hallo,

wie mir scheint, sehe ich den CSS-Wald vor lauter Bäumen nicht mehr. Ich will eine CSS-basierte Navigation erstellen, welcher vertical verläuft und über 3 Ebenen geht. Jede Ebene soll eine andere Hintergrundfarbe haben, die Linkitems sollen nacheinander eingerückt sein und die Hintergrundfarben sollen aber immer am linken Rand beginnen.

[Ebene1]
|   [Ebene2]
|      [Ebene3]

Ich schaffe es auch, den Hintergrund der 2. Navigation noch am linken Rand zu platzieren. Bei der dritten Liste dann jedoch fehlen am linken Rand einige Pixel.

Mein Code:

<div class="navigation">
            	<ul>
                	<li>
                    	<div class="navigation_ebene1">
                        	<a href="#Linkitem" target="_self">Festplatten</a>
                            <div class="navigation_ebene2">
                            	<ul>
                                	<li><a href="#Linkitem" target="_self">1¸8"</a></li>
                                    <li><a href="#Linkitem" target="_self">2¸5"</a></li>
                                    <li>
                                    	<div class="navigation_ebene3">
                                    		<a href="#Linkitem" target="_self">3¸5"</a>
                                            <ul>
                                            	<li><a href="#Linkitem" target="_self">IDE</a></li>
                                                <li><a href="#Linkitem" target="_self">SATA</a></li>
                                            </ul>
                                        </div>
                                    </li>
                                </ul>
                            </div>
                        </div>
                    </li>
                    <li>
                    	<div class="navigation_ebene1">
                        	<a href="#Linkitem" target="_self">Eingabegeräte</a>
                        </div>
                    </li>
                    <li>
                    	<div class="navigation_ebene1">
                        	<a href="#Linkitem" target="_self">PC-Systeme</a>
                        </div>
                    </li>
                </ul>	
            </div>

Meine CSS:

div.navigation {
	padding: 0px 0px 5px 0px;
}
	div.navigation ul {
		list-style-type: none;
	}
		div.navigation li:hover,
		div.navigation li:active {
			background-color: #c4dda9;
		}
	div.navigation_ebene1 {
		padding: 5px 0px 5px 0px;
		border-bottom: 1px solid #005d00;
		clear: both;
	}
		div.navigation_ebene1 a,
		div.navigation_ebene1 a:visited {
			color: #000000;
			text-decoration: none;
			display: block;
			padding: 0px 0px 0px 14px;
			background-image: url(../img/pfeil_gross_schwarz.png);
			background-position: left center;
			background-repeat: no-repeat;
		}
		div.navigation_ebene1 a:hover,
		div.navigation_ebene1 a:active {
			background-image: url(../img/pfeil_gross_gruen.png);
		}
	div.navigation_ebene2 {

	}
		div.navigation_ebene2 li {
			padding: 1px 0px 1px 14px;
		}
		div.navigation_ebene2 li:hover,
		div.navigation_ebene2 li:active {	
			background-color: #d1ebb4;
		}
	div.navigation_ebene3 {

	}
		div.navigation_ebene3 li {
			padding: 1px 0px 1px 13px;
		}
		div.navigation_ebene3 li:hover,
		div.navigation_ebene3 li:active {
			background-color: #ddf8be;
		}

Bitte bitte helft mir! #giggle# #giggle#
Ich glaube fast, dass es nur ein ganz banaler Fehler ist -.-

So long!
Reiko

/*edit: achja, anzuschauen ist das ganze unter http://www.rsv-computer.de

Ich würde das komplett anders aufbauen.
Auf die DIV's kannst du eigentlich komplett verzichten.

Die Hintergründe würde ich dann immer über li a setzen.
zweite Ebene
li li a
dritte Ebene
li li li a

Das gaze schaut dann wie folgt aus:

CSS

/* Reset Listen Style */
#mainNavi ul {
	list-style-type: none;
	padding: 0;
	margin: 0;
	width: 200px;
}

/* 1. Ebene */
#mainNavi li a {
	display:block;
	padding: 5px;
	background-color:#00FF00;
}

/* 2. Ebene */
#mainNavi li li a {
	padding: 3px 0 3px 20px;
	background-color:#FF0000;
}

/* 3. Ebene */
#mainNavi li li li a {
	padding: 2px 0 2px 40px;
	background-color:#0000FF;
	color: #fff;
}

HTML

<div ID="mainNavi">
<ul>
  <li><a href="#">Ebene 1
    </a>
    <ul>
      <li><a href="#">Ebene 1.1</a>
        <ul>
          <li><a href="#">Ebene 1.1.1</a></li>
          <li><a href="#">Ebene 1.1.2  </a></li>
        </ul>
      </li>
      <li><a href="#">Ebene 1.2 </a></li>
    </ul>
  </li>
  <li><a href="#">Ebene 2</a></li>
  <li><a href="#">Ebene 3 </a></li>
</ul>

Ich danke dir!
Warum einfach, wenn es auch umständlich geht? 😉

Ích würd dich ja knutschen, aber ich denke, das willst du nicht! 🙂

So long!
Reiko