Problem mit einer Liste

[alexf812]

Hallo,

ich will erreichen, das jedes Listenelement oben und unten eine border hat.
durch den folgenden quelltext ist es aber so, das ja die liste der 2. ebene unten eine border hat und die liste der 1. ebene oben, also ist die linie dort doppelt so hoch. hat da jemand ne lösung, das die linien auch an dieser Nahtstelle gleich gross sind?

Ich könnte zwar nur 1 liste machen und die einträge einfach einrücken, aber das ist ja kein korrekter quellcode

#navi{
	background-color: #ff4802;
	width: 190px;
	float: left;
}

#navi ul li{
	
	border-top: 1px solid #fff;
	border-bottom: 1px solid #000;
	
}

/** 
 * erste Ebene
 */
#navi ul li a{
	display: block;
	background-color:#009933;
	width: 170px;
	border-left: 10px solid #ff0000;
	padding: 5px 5px;
	
}

/**
 * zweite Ebene
 */

#navi ul li ul{
	border-top: 1px solid #000;
}

#navi ul li ul li{
	
	padding-left: 0px;
}
 
#navi ul li ul li a{ 
	width: 155px;
	padding-left: 20px;
} 

<div id="navi">
	<ul>
		<li><a href="#">Link 1. ebene</a>
			<ul>
				<li><a href="#">Link 2.ebene</a></li>
				<li><a href="#">Link 2.ebene</a></li>
			</ul>
		</li>
		<li><a href="#">Link 1.ebene</a></li>
		<li><a href="#">Link 1.ebene</a></li>
	</ul>
</div>

[alexf812]

stimmt. das geht natürlich auch. hätt ich auch selber drauf kommen können :-)
mit einer zusätzlichen klasse im li wollte ich es nämlich nicht unbedingt machen

[alexf812]

hab grad gemerkt, das die linie unter den links nur bis zur linken border angezeigt wird, sie soll aber durchgehen. wenn ich also ne weisse linie habe, dann hört diese an der dunklen border auf und geht nicht bis zum rand...geht das noch zu machen?

[alexf812]

aber ganz ohne hintergrundbild, nur rein mit css geht es dann zwar nicht, aber das macht nix... bastel ich mir noch ein hintergrundbild

danke dir.